javascript类youtube滑块控件

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

我需要在浏览器中随时间播放数据。我将有一个工人通过调用RESTAPI来填充播放缓冲区。然后UI线程将使用缓冲区并将数据回放给用户

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

---

我目前在我的网站中使用jQuery，因此希望使用基于该框架的解决方案。

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

$（函数（）{
var ytplayer=$（'#player'）[0]，
//#YouTube API的秒数
duration=ytplayer.getDuration（），
//#字节
totalBytes=ytplayer.GetVideoByTestTotal（），
//开始#字节-可能不需要
startBytes=ytplayer.getVideoStartBytes（）；
$（“#滑块”）.滑块({
射程：“最大”，
最小：起始字节，
最大：持续时间，
价值：1
})
//图片：http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/images/ui-bg_highlight-soft_15_cc0000_1x100.png
//不透明度为30%
.css（'background-image'，'url(http://i56.tinypic.com/fbjad2.png)');
//循环以更新滑块
函数循环（）{
var time=ytplayer.getCurrentTime（），
//使加载百分比
loaded=100-（ytplayer.getVideoBytesLoaded（）/totalBytes）*100；
//设置限制-没有人喜欢负宽度
如果（加载<0）{loaded=0；}
//滑块上的更新时间
$（“#滑块”）
.slider（'选项'，'值'，时间）
.find（'.ui小部件标题'）.css（'width'，loaded+'%'）；
//根据需要重复循环
如果（加载<0 | |时间<持续时间）{
设置超时（循环，500）；
}
}
loop（）；
});

是否也可以从谷歌闭包库中尝试

单击该页面上的“演示”链接以查看演示

---

您可以在滑块顶部覆盖一个透明的div，指示预取了多少数据（可能使用一个宽度不断增加的表和一个彩色但透明的背景）。

Wow-加上一个链接到jsfiddle！很高兴能在浏览器中执行此操作

$(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(); 
});