javascript youtube như điều khiển thanh trượt

Question

Tôi có câu hỏi về việc triển khai kiểm soát thanh trượt trong trình duyệt.

Tôi cần phát lại dữ liệu theo thời gian, trong trình duyệt. Tôi sẽ có một Worker làm đầy bộ đệm phát lại bằng cách thực hiện các cuộc gọi đến một api REST. Chuỗi giao diện người dùng sau đó sẽ sử dụng bộ đệm và phát lại dữ liệu cho người dùng.

Tôi muốn mô phỏng kiểm soát giao diện người dùng tiến trình của YouTube. Nó cho bạn thấy trong một giao diện người dùng kiểm soát số lượng bạn đã xem và số tiền đã được tìm nạp trước. Có thể điều chỉnh thanh trượt để thực hiện điều này không? Thanh trượt phạm vi giao diện người dùng jQuery không hoàn toàn là những gì tôi muốn

Tôi hiện đang sử dụng jQuery trong trang web của mình, vì vậy, sẽ thích giải pháp dựa trên khuôn khổ đó.

Answer 1

Bạn chỉ có thể thay đổi giao diện người dùng jQuery trượt một chút bằng cách sử dụng hình nền của riêng bạn, sau đó điều chỉnh độ rộng để hiển thị các tiến trình tải (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(); 
}); 

Answer 2

Có thể thử cũng goog.ui.Slider từ thư viện Google Đóng cửa?

Nhấp vào liên kết "demo" trên trang đó để xem bản trình diễn.

Bạn có thể phủ một div trong suốt lên trên thanh trượt cho biết số lượng dữ liệu đã được tìm nạp trước (có thể sử dụng bảng có chiều rộng tăng và nền đầy màu sắc nhưng trong suốt).