Javascript Youtube wie Schieberegler

Question

Ich habe eine Frage über die Implementierung eines Schiebereglers in einem Browser.

Ich muss Daten im Laufe der Zeit in einem Browser wiedergeben. Ich werde einen Worker haben, der den Wiedergabepuffer füllt, indem er Aufrufe an eine REST API sendet. Der UI-Thread wird dann den Puffer verbrauchen und die Daten für den Benutzer wiedergeben.

Ich möchte YouTube Fortschritt UI Kontrolle simulieren. Es zeigt Ihnen in einem einzigen UI-Steuerelement, wie viel Sie gesehen haben und wie viel vorab abgerufen wurde. Ist es möglich, einen Schieberegler dafür anzupassen? Der jQuery UI Bereich Schieberegler ist nicht ganz was ich will

Ich benutze derzeit jQuery in meiner Website, so würde eine Lösung auf der Grundlage dieses Rahmens bevorzugen.

Answer 1

Sie könnten nur den jQuery UI ändern slider ein wenig von Ihrem eigenen Hintergrundbild verwenden, dann die Breite Einstellen der Last Fortschritt (demo) zu zeigen:

$(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

Vielleicht auch goog.ui.Slider von Google Closure Bibliothek versuchen?

Klicken Sie auf den Link "Demo" auf dieser Seite, um eine Demo zu sehen.

Sie können ein transparentes div über dem Schieberegler einblenden, das angibt, wie viele Daten vorab abgerufen wurden (z. B. mit einer Tabelle mit zunehmenden Breiten und einem bunten, aber transparenten Hintergrund).