在videojs播放器上正确包含可拖动标记

Properly containing draggable markers on videojs player

本文关键字：包含可 拖动 videojs 播放器      更新时间：2023-09-26

我使用javascript和videojs，对前端开发相对陌生。我目前正在做一个项目，我想让用户通过在videojs seekbar上使用可拖动标记来指定视频中的点。我从以下位置找到了videojs标记库：https://github.com/spchuang/videojs-markers并在他们的createMarkers（）函数中进行了简单的修改，以创建一个可拖动的标记，而不是永久标记。

function createMarkers(){
     // create the markers
     var duration, m, pos, text;
     console.log("[videojs-markers] creating markers");
     duration = player.duration();
     $.each(options.marker_breaks, function(key,time){
        pos = (time/duration)*100;
        m = $("<div class='vjs-marker'  id='"+key+"'></div>");
        m.css(setting.markerStyle)
           .css({"margin-left"   : -parseFloat(m.css("width"))/2 +'px',
              "left"          : pos+ '%'});
        //MY ADDITIONS BEGIN
        m.draggable({
            containment: '.vjs-progress-holder'
        });
        m.css({'position':'absolute'});
        //MY ADDITIONS END
        video_wrapper.find('.vjs-progress-control').append(m);
        text = options.marker_text[key] || "";
        markers.push({div: m, time: time, pos:pos, text: text});
     });
  }

然而，当我尝试在搜索栏上放置一个可拖动标记时，它并没有真正包含在栏中。可以在搜索栏下方向下拖动标记。如果我把它们放在搜索栏中进行遏制，它们就会跳过视频。这是插入标记的代码：

<!doctype html>
<html>
  <head>
    <script src="C:/linkto/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="C:/linkto/jquery-ui/ui/minified/jquery-ui.custom.min.js"></script>
    <link href="C:/linkto/video-js/video-js.css" rel="stylesheet">
    <script src="C:/linkto/video-js/video.js"></script>
    <script src="C:/linkto/video-js/videojs-markers/videojs.markers.js"></script>
    <link href="C:/linkto/video-js/videojs-markers/videojs.markers.css" rel="stylesheet">
  </head>  
  <body>
    <video id="example_video_1" class="video-js vjs-default-skin" width="640" height="480" controls>
      <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
      <source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm">
    </video>
    <script>    
        var playa = videojs("example_video_1").player()
        playa.markers({
            //set break time
            setting: {
                forceInitialization: true
            },
            marker_breaks:[0, playa.duration()]
        });  
    </script>
  </body>
</html>

除了上面的内容，我还没有编辑videojs标记代码中的css。任何关于我如何能够更准确地包含标记的帮助都将是很棒的！

谢谢！~ Zoltana

尝试在可拖动设置对象中使用"axis"属性。

m.draggable({
    containment: '.vjs-progress-holder',
    axis: 'x'
});
相关文章：