Question

我正在使用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。有关如何更准确地包含标记的任何帮助都会很棒！

谢谢！〜Zoltana

Answer 1

尝试使用＆＃34;轴＆＃34;可拖动设置对象中的属性。

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

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

1 个答案: