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 c

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!