使HTML5视频可拖动而不会丢失控件 [英] Making HTML5 video draggable without losing the controls

问题描述

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

I have an HTML5 video player in this jsfiddle - http://jsfiddle.net/6B7w7/ that works fine. When you click the "Video1 - BranFerren" line the video loads and plays, and the controls work fine:

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

但我希望能够在播放时将播放器拖动到屏幕的其他部分。所以我尝试制作视频播放器本身，＃videoPlayer或videoPlayer包装器div，＃videoPlayer_wrapper，可拖动到JavaScript的第3行和第4行。

But I want to be able to drag the player to a different part of the screen while it's playing. So I tried to make either the video player itself, #videoPlayer, or the videoPlayer wrapper div, #videoPlayer_wrapper, draggable in lines 3 and 4 of the JavaScript.

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

取消注释这些行之一会使视频播放器可以拖动，好吧，但我无法再设置视频控件上的位置或音频滑块。

Uncommenting either of these lines makes the video player draggable, all right, but I can no longer set the position or audio sliders on the video controls.

有谁知道如何让视频可以拖动并仍能控制播放位置和音量？

Does anyone know how I can make the video draggable and still be able to control the play position and the volume?

谢谢

推荐答案

添加两个额外的事件检查，一个用于 mousedown 和一个 mouseup 。

Add two extra event checks, one for mousedown and one for mouseup.

On mousedown check相对于视频的y坐标。如果在控制部分禁用draggable，如果不允许。

On mousedown check the y coordinate relative to video. If in the control section disable draggable, and if not allow.

在 mouseup 处理程序中始终启用draggable，以便元素是可拖动的，直到下一次检查鼠标位置。

In the mouseup handler always enable draggable so the element is draggable until next check checking for mouse position.

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

This way the event on click will not be passed to the browser's drag handling.

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

希望这有帮助！

这篇关于使HTML5视频可拖动而不会丢失控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！