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

我正在使用javascript和videojs，并且对于前端开发相对较新。我目前正在研究一个项目，我想让用户通过使用videojs seekbar上的可拖动标记来指定视频中的点。我找到了来自https://github.com/spchuang/videojs-markers的videojs标记库，并在其createMarkers（）函数中进行了简单修改，以创建可拖动标记而不是永久标记。在videojs播放器上正确包含可拖动标记

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}); 
    }); 
    }

但是，当我尝试在搜索栏上放置一个可拖动标记时，它并不包含在栏中。标记可以拖到seekbar下方。如果我将它们包含在搜索栏中以进行遏制，那么它们会混淆视频的跳过。下面是插入标记的代码：我没有编辑从videojs-标记代码一旁的CSS从什么上面

<!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>

。任何关于如何能够更准确地包含标记的帮助将非常棒！

谢谢！〜Zoltana

来源

2014-10-10 zoltana

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

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

来源

2014-10-10 16:16:36

谢谢你的工作完美！ :) – zoltana 2014-10-10 21:03:55

随时接受我的解决方案作为您的问题的答案。 – 2014-10-15 15:56:10

抱歉堆栈溢出相对较新:)它被接受 – zoltana 2014-10-16 17:19:33

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

回答

相关问题