使 HTML5 视频可拖动而不会丢失控件

Question

我在这个 jsfiddle 中有一个 HTML5 视频播放器 - http://jsfiddle.net/6B7w7/ 可以正常工作。当您单击“Video1 - BranFerren”行时，视频会加载并播放，并且控件工作正常：

<div id="video1" class="video_link">Video 1 - BranFerren &nbsp&nbsp<b>6:15</b></div>

<div id="videoPlayer_wrapper"> 
        <video id="videoPlayer" width="600" height="340" controls > 
        </video>
 </div> 

但我希望能够在播放器播放时将其拖动到屏幕的不同部分。因此，我尝试在 JavaScript 的第 3 行和第 4 行中使视频播放器本身 #videoPlayer 或 videoPlayer 包装器 div #videoPlayer_wrapper 可拖动。

 3   //$('#videoPlayer_wrapper').draggable();
 4   //$('#videoPlayer').draggable();

取消注释这些行中的任何一条会使视频播放器可以拖动，但是我不能再在视频控件上设置位置或音频滑块。

有谁知道我怎样才能使视频可拖动并且仍然能够控制播放位置和音量？

谢谢

Answer 1

添加两项额外的事件检查，一项针对mousedown，一项针对mouseup。

在mousedown 上检查相对于视频的 y 坐标。如果在控制部分禁用可拖动，如果不允许。

在mouseup 处理程序中始终启用可拖动元素，以便在下次检查鼠标位置之前可以拖动元素。

这样点击事件不会被传递给浏览器的拖动处理。

Demo here

$('#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
});

希望这会有所帮助！