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

【问题标题】：Properly containing draggable markers on videojs player在 videojs 播放器上正确包含可拖动标记
【发布时间】：2014-10-10 14:37:25
【问题描述】：

我正在使用 javascript 和 videojs，并且对前端开发还比较陌生。我目前正在开发一个项目，我希望允许用户通过使用 videojs 搜索栏上的可拖动标记来指定视频中的点。我从https://github.com/spchuang/videojs-markers 找到了 videojs 标记库，并在其 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-markers 代码中的 css。任何关于我如何能够更准确地包含标记的帮助都会很棒！

谢谢！ ~佐尔塔娜

【问题讨论】：

标签： javascript jquery jquery-ui video.js

【解决方案1】：

尝试使用可拖动设置对象中的“轴”属性。

m.draggable({
    containment: '.vjs-progress-holder',
    axis: 'x'
});

【讨论】：

欢迎接受我的解决方案作为您问题的答案。
抱歉堆栈溢出相对较新:) 它已被接受