javascript youtube 喜欢滑块控件答案

【问题标题】：javascript youtube like slider controljavascript youtube 喜欢滑块控件
【发布时间】：2023-03-21 19:09:01
【问题描述】：

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

我需要在浏览器中随着时间的推移播放数据。我将让一名 Worker 通过调用 REST api 来填充播放缓冲区。然后，UI 线程将消耗缓冲区并将数据播放给用户。

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

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

【问题讨论】：

标签： javascript jquery slider

【解决方案1】：

您可以通过使用自己的背景图片稍微修改 jQuery UI 滑块，然后调整宽度以显示加载进度 (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(); 
});

【讨论】：

哇——加上一个用于 jsfiddle 的链接！很高兴能够在浏览器中执行此操作

【解决方案2】：

也许也可以试试来自 Google Closure 库的 goog.ui.Slider？

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

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

【讨论】：