如何使标记动态地标记进度的任何位置

Question

我的标记有问题，我希望标记可以拉伸以标记进度条上的任何位置如下图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>

Answer 1

在你想要指针的地方，只需将时间放在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 的所有内容。

如果您有任何问题，请告知我们！

快乐编码！

Answer 2

一种方法是在 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>