在videojs播放器上正确包含可拖动标记 [英] Properly containing draggable markers on videojs player
问题描述
我正在使用javascript和videojs，并且在前端开发方面相对较新.我目前正在一个项目中，我希望允许用户通过使用videojs搜寻栏上的可拖动标记来指定视频中的点.我从以下位置找到了videojs标记库: https://github.com/spchuang/videojs-markers 并且对其createMarkers()函数进行了简单的修改，以创建可拖动的标记而不是永久标记.
I am working with javascript and videojs and am relatively new to front end development. I'm currently working on a project where I want to allow the user to specify points in a video through the use of draggable markers on the videojs seekbar. I found the videojs marker library from: https://github.com/spchuang/videojs-markers and have made a simple modification in their createMarkers() function to create a draggable marker instead of a permanent marker.
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});
});
}
但是，当我尝试在搜索栏上放置可拖动标记时，它实际上并没有包含在搜索栏中.标记可以向下拖动到搜索栏下方.如果我改为将它们包含在搜寻栏中以进行遏制，则它们会导致视频的跳过.这是插入标记的代码:
However when I try and place a draggable marker on the seek bar it is not really contained in the bar. The markers can be dragged down below the seekbar. If I instead include them in the seekbar for containment they mess with the skipping of the video. Here is the code for inserting the marker:
<!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.关于如何能够更准确地包含标记的任何帮助都将非常棒！
I have not edited the css from the videojs-markers code aside from what's above. Any help on how I might be able to contain the marker more accurately would be awesome!
谢谢！ 〜佐尔塔纳
推荐答案
尝试在可拖动设置对象中使用"axis"属性.
Try using the "axis" property in the draggable setup object.
m.draggable({
containment: '.vjs-progress-holder',
axis: 'x'
});
这篇关于在videojs播放器上正确包含可拖动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
