像滑塊控件的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

回答

相關問題