我有一个
HTML5视频播放器在这个jsfiddle –
http://jsfiddle.net/6B7w7/工作正常.当您单击“Video1 – BranFerren”行时,视频会加载并播放,控件工作正常：
@H_404_2@<div id="video1" class="video_link">Video 1 - BranFerren   <b>6:15</b></div>
<div id="videoPlayer_wrapper">
<video id="videoPlayer" width="600" height="340" controls >
</video>
</div>
但是我希望能够在播放时将播放器拖动到屏幕的不同部分.所以我尝试制作视频播放器本身,#videoPlayer或videoPlayer包装器div,#videoPlayer_wrapper,可拖动到JavaScript的第3行和第4行.
@H_404_2@3 //$('#videoPlayer_wrapper').draggable(); 4 //$('#videoPlayer').draggable();取消注释这些行中的任何一行都会使视频播放器可以拖动,但我无法再在视频控件上设置位置或音频滑块.
有谁知道我如何使视频可拖动,仍然能够控制播放位置和音量？
谢谢
解决方法
添加两个额外的事件检查,一个用于mousedown,另一个用于mouseup.
在mousedown上检查相对于视频的y坐标.如果在控制部分禁用draggable,如果不允许.
在mouseup处理程序中,始终启用draggable,以便元素可拖动,直到下一次检查鼠标位置.
这样,点击事件将不会传递给浏览器的拖动处理.
@H_404_2@$('#videoPlayer').on('mousedown',function (e) { var wrapper = $('#videoPlayer_wrapper'),// calc relative mouse pos rect = wrapper[0].getBoundingClientRect(),y = e.clientY - rect.top; if (y > $('#videoPlayer')[0].height - 40) { // if in ctrl zone disable drag wrapper.draggable('disable'); } }); $('#videoPlayer').on('mouseup',function (e) { $('#videoPlayer_wrapper').draggable('enable'); // always enable });希望这可以帮助！
