像滑块控件的javascript youtube

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

我需要在浏览器中随时间回放数据。我将有一个Worker通过调用REST API来填充播放缓冲区。 UI线程将消耗缓冲区并将数据回放给用户。

我想模拟YouTube进度UI控件。它会在单个UI控件中显示您观看了多少内容，以及预取了多少内容。是否可以调整滑块控件来做到这一点？ jQuery UI范围滑块并不是我想要的

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

2010-10-17 Kevin

你可以只修改了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(); 
});

来源

2010-10-17 13:47:12 Mottie

哇 - 加上一个链接到jsfiddle！很高兴能够在浏览器中做到这一点 – Kevin 2010-11-12 22:52:24

或许也从谷歌关闭图书馆尝试goog.ui.Slider？

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

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

来源

2010-10-17 15:50:10 user460331

像滑块控件的javascript youtube

回答

相关问题