Making HTML5 video draggable without losing the controls

Question

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> 

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?

Thanks

Answer 1

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

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

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.

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
});

Hope this helps!