我使用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'
});