javascript youtube como control deslizante

Question

Tengo una pregunta sobre la implementación de un control deslizante en un navegador.

Necesito reproducir datos a lo largo del tiempo, en un navegador. Voy a hacer que un trabajador llene el búfer de reproducción haciendo llamadas a una APLICACIÓN REST. El subproceso de UI consumirá el búfer y reproducirá los datos para el usuario.

Quiero simular el control de UI de progreso de YouTube. Le muestra en una sola IU controlar cuánto ha visto y cuánto ha captado previamente. ¿Es posible adaptar un control deslizante para hacer esto? El control deslizante de la gama jQuery UI no es lo que quiero

Actualmente uso jQuery en mi sitio web, por lo que preferiría una solución basada en ese marco.

Answer 1

Se podía modificar la interfaz de usuario jQuery Slider de un poco por el uso de su propia imagen de fondo, a continuación, ajustar el ancho para mostrar el progreso de carga (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

quizás tratar también goog.ui.Slider de la biblioteca de Google Closure?

Haga clic en el enlace "demostración" en esa página para ver una demostración.

Puede superponer un div transparente en la parte superior del control deslizante que indica la cantidad de datos que se precargaron (tal vez usando una tabla con anchos crecientes y un fondo colorido pero transparente).