CODEWITHSUNDEEP
jqueryhtmljquery-uivideojquery-ui-slider
Mlarnt90
Mlarnt90

Reputation: 186

How to use jquery ui slider work with custom controlled html5 video

I've been looking to use jquery ui slider widget to get a slider to work with html5 video. so how can I make this JQuery UI slider synchronized with a html5 video.?.

explanation with a sample code highly appreciated.

Thanx in advance.!!

Upvotes: 1

Views: 1573

Answers (1)

adeneo
adeneo

Reputation: 318162

You'd have to have a video and a slider of course, then set the slider to start at zero and end at the duration of the video.
Then you'll have to update the video's currentTime when the slider moves, and likewise update the slider when the video plays.

It's actually not that hard, something like this should do it

$('#video').on({
    canplaythrough: function() {
        var video = this;
        $('#slider').slider({
            range : "max",
            min   : 0,
            max   : parseInt(video.duration, 10),
            value : 0,
            slide : function (event, ui) {
                video.currentTime = ui.value;
            }
        });
    },
    timeupdate: function() {
        $('#slider').slider('value', this.currentTime)
    }
});

FIDDLE

Upvotes: 3

Related Questions