javascript youtube喜欢滑块控件 [英] javascript youtube like slider control

问题描述

我有一个关于在浏览器中实现滑块控件的问题。

I've a question about implementing a slider control in a browser.

我需要在浏览器中随时间回放数据。我将通过调用REST api让一个Worker填充回放缓冲区。然后，UI线程将使用缓冲区并将数据回放给用户。

I need to playback data over time, in a browser. I will have one Worker filling the playback buffer by making calls to a REST api. The UI thread will then consume the buffer and playback the data to the user.

我想模拟YouTube进度UI控件。它会在单个UI控件中显示您已观看了多少，以及预取了多少。是否可以调整滑块控件来执行此操作？ jQuery UI范围滑块不是我想要的

I want to simulate YouTube progress UI control. It shows you in a single UI control how much you've watched, and how much has been prefetched. Is it possible to adapt a slider control to do this ? The jQuery UI range slider isn't quite what I want

我目前在我的网站中使用jQuery，所以更喜欢基于该框架的解决方案。

I currently use jQuery in my website, so would prefer a solution based on that framework.

推荐答案

您可以使用自己的背景图像稍微修改jQuery UI滑块，然后调整宽度以显示加载进度（演示）：

You could just modify the jQuery UI slider a bit by using your own background image, then adjusting the width to show the load progress (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(); 
});

这篇关于javascript youtube喜欢滑块控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！