javascript youtube like suwak control

Question

Mam pytanie dotyczące implementacji suwaka w przeglądarce.

Potrzebuję odtwarzać dane w czasie, w przeglądarce. Jeden pracownik będzie wypełniał bufor odtwarzania, wykonując połączenia z interfejsem REST. Wątek interfejsu użytkownika pobierze bufor i odtworzy dane użytkownikowi.

Chcę symulować kontrolę interfejsu użytkownika postępów w YouTube. Pokazuje w jednym interfejsie użytkownika, ile obejrzałeś i ile zostało wstępnie pobrane. Czy można to zmienić za pomocą suwaka? Suwak suwaka JQuery UI nie jest tym, czego chcę. Obecnie używam jQuery na mojej stronie, więc wolałbym rozwiązanie oparte na tej strukturze.

Answer 1

Możesz po prostu zmodyfikować jQuery UI suwak trochę przy użyciu własnego obrazu tła, a następnie dostosowanie szerokości do pokazania postępu ładowania (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

Może spróbuj również goog.ui.Slider z biblioteki Google Closure?

Kliknij link "pokaz" na tej stronie, aby wyświetlić wersję demo.

Można nakładać przezroczysty element div na suwak, który wskazuje, ile danych zostało wcześniej pobranych (może za pomocą tabeli o rosnącej szerokości i kolorowego, ale przezroczystego tła).