Moving HTML5 video without losing control

Question

I have an HTML5 video player in this jsfiddle - http://jsfiddle.net/6B7w7/ , which works fine. When you click on the line "Video1 - BranFerren", 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 you to be able to drag the player to another part of the screen during the game. Therefore, I tried to make either the video player itself, or #videoPlayer, or the wrapper div of the video stream, #videoPlayer_wrapper, draggable in lines 3 and 4 of JavaScript.

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

Uncommenting any of these lines makes the video player drag and drop, everything is fine, but I can no longer set the position or sliders of the audio on the video controls.

Does anyone know how I can make a video drag and drop and still be able to control the playback position and volume?

thanks

Answer 1

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

In mousedown check the y coordinate for the video. If in the control section disable drag and drop, and if not allow.

In the mouseup handler, drag and drop is always enabled, so the item is dragged until the next check, which checks the position of the mouse.

Thus, the click event will not be passed to the browser drag and drop processing.

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!