javascript youtube come controllo slider

Question

Ho una domanda sull'implementazione di un controllo di scorrimento in un browser.

Ho bisogno di riprodurre i dati nel tempo, in un browser. Avrò un lavoratore che riempie il buffer di riproduzione effettuando chiamate a una API REST. Il thread dell'interfaccia utente consumerà quindi il buffer e riprodurrà i dati all'utente.

Desidero simulare il controllo dell'interfaccia utente di YouTube. Ti mostra in un singolo controllo dell'interfaccia utente quanto hai guardato e quanto è stato precaricato. È possibile adattare un controllo a scorrimento per fare questo? Il cursore dell'intervallo dell'interfaccia utente jQuery non è esattamente quello che voglio

Attualmente utilizzo jQuery nel mio sito Web, quindi preferirei una soluzione basata su tale framework.

Answer 1

Si potrebbe semplicemente modificare il jQuery UI Cursore un po 'utilizzando un'immagine di sfondo, allora la regolazione della larghezza di mostrare lo stato di avanzamento del carico (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

magari provare anche goog.ui.Slider dalla libreria di Google di chiusura?

Fare clic sul collegamento "demo" in quella pagina per visualizzare una demo.

È possibile sovrapporre un div trasparente sopra al cursore che indica quanti dati sono stati precaricati (magari utilizzando una tabella con larghezze crescenti e uno sfondo colorato ma trasparente).