亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使標記動態地標記進度的任何位置

如何使標記動態地標記進度的任何位置

翻閱古今 2022-01-07 19:27:26
我的標記有問題，我希望標記可以拉伸以標記進度條上的任何位置如下圖GIF問題：我想選擇進度條上的任意一點，并且能夠拉伸標記，可以是多個標記點。我不知道如何使用以下代碼：var player = videojs('demo');player.markers({   markerStyle: {      'width':'9px',      'border-radius': '40%',      'background-color': 'orange'   },   markerTip:{      display: true,      text: function(marker) {         return "I am a marker tip: "+ marker.text;      }   },   breakOverlay:{      display: true,      displayTime: 4,      style:{         'width':'100%',         'height': '30%',         'background-color': 'rgba(10,10,10,0.6)',         'color': 'white',         'font-size': '16px'      },      text: function(marker) {         return "This is a break overlay: " + marker.overlayText;      },   },   markers: [      {time: 9.5, text: "this", overlayText: "1", class: "special-blue"},      {time: 16,  text: "is", overlayText: "2"},      {time: 23.6,text: "so", overlayText: "3"},      {time: 28,  text: "cool", overlayText: "4"}   ]});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="http://vjs.zencdn.net/4.2/video.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script><link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/><video id="demo" width="400" height="210" controls class="video-js vjs-default-skin">   <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">   <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></video>
查看完整描述

2 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

在你想要指針的地方，只需將時間放在time: 20.5并增加 的寬度markerStyle: { 'width': '190px' }，這樣你就會在視頻進度條中得到長線！


開始了


var player = videojs('demo');


player.markers({

   markerStyle: {

      'width':'190px',

      'border-radius': '2px',

      'background-color': 'orange'

   },

   markerTip:{

      display: true,

      text: function(marker) {

         return "I am a marker tip: "+ marker.text;

      }

   },

   breakOverlay:{

      display: true,

      displayTime: 120,

      style:{

         'width':'100%',

         'height': '30%',

         'background-color': 'rgba(10,10,10,0.6)',

         'color': 'white',

         'font-size': '16px'

      },

      text: function(marker) {

         return "This is a break overlay: " + marker.overlayText;

      },

   },

   markers: [

      {time: 20.5, text: "this", overlayText: "1", class: "special-blue"},

   ]

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="http://vjs.zencdn.net/4.2/video.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>

<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/>

<video id="demo" width="400" height="210" controls class="video-js vjs-default-skin">

   <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">

   <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">

</video>

你可以在這里學習更多關于docs 的所有內容。

如果您有任何問題，請告知我們！

快樂編碼！


查看完整回答
反對 回復 2022-01-07
?
慕俠2389804

TA貢獻1719條經驗 獲得超6個贊

一種方法是在 seekbar 上掛鉤mousedown和mousemove事件。使用自定義類在 mousedown 上添加標記。然后在 mousemove 上計算移動并使用自定義類將寬度添加到標記元素。


看這個例子：


var player = videojs('demo');


// Set variable so we can add values later

let lastAddedMarker = null;

let moving = false;

let seekBar = player.controlBar.progressControl.seekBar;

let startPoint = 0;


// When seekbar is clicked add marker and set values to startpoint and set moving flag to true

seekBar.on('mousedown', function(event) {

  var seekBarEl = this.el();

  startPoint = videojs.dom.getPointerPosition(seekBarEl, event).x;


  player.markers.add([{

    time: player.currentTime(),

    text: "I'm new",

    overlayText: "I'm new",

    class: 'custom-marker'

  }]);


  lastAddedMarker = jQuery(".custom-marker");

  moving = true;

});


// When user moves while on seekbar get the width and set it to 'custom-marker' class

seekBar.on("mousemove", function(e) {

  if (moving) {

    let seekBarEl = this.el();

    let movingPoint = videojs.dom.getPointerPosition(seekBarEl, event).x;

    let containerWidth = jQuery(seekBarEl).width();

    let markerWidth = containerWidth * (movingPoint - startPoint);

    lastAddedMarker.width(markerWidth + "px");

  }

});


jQuery(document).on("mouseup", function() {

  moving = false;

});


player.markers({

  markerStyle: {

    'width': '9px',

    'border-radius': '2px',

    'background-color': 'orange'

  },

  markerTip: {

    display: true,

    text: function(marker) {

      return "I am a marker tip: " + marker.text;

    }

  },

  onMarkerClick: function(marker) {

    console.log("AS");

  },

  breakOverlay: {

    display: true,

    displayTime: 4,

    style: {

      'width': '100%',

      'height': '30%',

      'background-color': 'rgba(10,10,10,0.6)',

      'color': 'white',

      'font-size': '16px'

    },

    text: function(marker) {

      return "This is a break overlay: " + marker.overlayText;

    },

  },

  markers: []

});

.vjs-marker {

  position: absolute;

  left: 0;

  bottom: 0;

  opacity: 1;

  height: 100%;

  transition: opacity .2s ease;

  -webkit-transition: opacity .2s ease;

  -moz-transition: opacity .2s ease;

  z-index: 100

}


.vjs-break-overlay,

.vjs-tip {

  visibility: hidden;

  position: absolute;

  z-index: 100000

}


.vjs-marker:hover {

  cursor: pointer;

  -webkit-transform: scale(1.3, 1.3);

  -moz-transform: scale(1.3, 1.3);

  -o-transform: scale(1.3, 1.3);

  -ms-transform: scale(1.3, 1.3);

  transform: scale(1.3, 1.3)

}


.vjs-tip {

  display: block;

  opacity: .8;

  padding: 5px;

  font-size: 10px;

  bottom: 14px

}


.vjs-tip .vjs-tip-arrow {

  background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) bottom left no-repeat;

  bottom: 0;

  left: 50%;

  margin-left: -4px;

  position: absolute;

  width: 9px;

  height: 5px

}


.vjs-tip .vjs-tip-inner {

  border-radius: 3px;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

  padding: 5px 8px 4px;

  background-color: #000;

  color: #fff;

  max-width: 200px;

  text-align: center

}


.vjs-break-overlay {

  top: 0

}


.vjs-break-overlay .vjs-break-overlay-text {

  padding: 9px;

  text-align: center

}

<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.min.js"></script>

<video id="demo" width="400" height="210" controls class="video-js vjs-default-skin">

  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">

  <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">

</video>


查看完整回答
反對 回復 2022-01-07
  • 2 回答
  • 0 關注
  • 247 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號