Geek Answers Handbook

Javascript youtube how to control the slider

I have a question about implementing a slider control in a browser.

I need to play data over time in a browser. I will have one worker populating the play buffer, making calls in the REST api. The UI thread will then consume the buffer and play back the data to the user.

I want to simulate YouTube user interface controls. It shows you in one user interface control how much you watched and how much was pre-programmed. Can I customize the slider for this? The jQuery UI range slider is not quite what I want

I am currently using jQuery on my website, so I would prefer a solution based on this structure.

+5
source share
2 answers

You can change the jQuery UI slider a bit using your own background image and then changing the width to show the progress of loading ( demo ):

$(function(){

    var ytplayer = $('#player')[0],
        // # seconds from YouTube API
        duration = ytplayer.getDuration(),
        // # bytes
        totalBytes = ytplayer.getVideoBytesTotal(),
        // start # bytes - may not be necessary
        startBytes = ytplayer.getVideoStartBytes();

    $("#slider").slider({
        range: "max",
        min: startBytes,
        max: duration,
        value: 1
    })
    // image: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/images/ui-bg_highlight-soft_15_cc0000_1x100.png
    // with a 30% opacity
    .css('background-image', 'url(http://i56.tinypic.com/fbjad2.png)');

    // Loop to update slider   
    function loop() {
        var time = ytplayer.getCurrentTime(),
            // make loaded a percentage
            loaded = 100 - (ytplayer.getVideoBytesLoaded() / totalBytes) * 100;

        // set limit - no one likes negative widths
        if (loaded < 0) { loaded = 0; }

        // update time on slider
        $('#slider')
            .slider('option', 'value', time)
            .find('.ui-widget-header').css('width', loaded + '%');

        // repeat loop as needed
        if (loaded < 0 || time < duration) {
            setTimeout(loop, 500);
        }
    }
    loop(); 
});
+3
source

Perhaps try also goog.ui.Slider from the Google Closure library?

Click on the demo link on this page to see a demo.

You can overlay a transparent div on top of the slider, which indicates how much data has been preprogrammed (possibly using a table with increased width and a colorful but transparent background).

0
source

More articles:


All Articles