javascript - loop - Funciones de atributos de HTML5 Video Buffer

video preload javascript

Question

Estoy diseñando un reproductor de video HTML5 personalizado. Por lo tanto, tendrá su propio control deslizante personalizado para imitar el progreso del video, así que necesito entender todo el contenido del buffering de un video HTML5 .

Me encontré con este artículo: Video Buffering . Dice que el objeto con búfer consta de varios rangos de tiempo en orden lineal de tiempo de inicio. Pero no pude averiguar lo siguiente:

1. Di que el video comienza. Continúa hasta la 1:45 por su cuenta (en ocasiones puede detenerse, esperando datos adicionales), después de lo cual de repente salté a las 32:45. Ahora, después de un tiempo, si salto de nuevo a 1:27 (dentro del rango de tiempo inicialmente cargado y jugado, antes de dar el salto), ¿comenzará a reproducirse inmediatamente como ya estaba cargado antes? ¿O es que desde que hice un salto, esa parte se pierde y habrá que recuperarla? De cualquier manera, ¿el comportamiento es consistente para todos estos escenarios?

2. Digamos que hago 5 o 6 saltos de este tipo, cada vez esperando unos segundos para que algunos datos se carguen después del salto. ¿Eso significa que el objeto almacenado almacenará todos esos rangos de tiempo? ¿O puede que algunos se pierdan? ¿Es una especie de apilamiento, donde los rangos anteriores se quitarán a medida que se carguen más rangos debido a saltos adicionales?

3. ¿Verificará si el objeto con buffered tiene un rango de tiempo que comienza en 0 (olvide la transmisión en vivo) y finaliza en la duración de la duración del video para garantizar que todo el recurso de video se haya cargado completamente? De no ser así, ¿hay alguna manera de saber que todo el video se ha descargado y que se puede buscar cualquier parte, desde donde el video se puede reproducir continuamente hasta el final sin demora?

Las especificaciones del W3C no son muy claras al respecto, y tampoco puedo encontrar un recurso de video remoto adecuadamente grande (digamos más de una hora) para probar.

Answer 1

1. Casi todos los navegadores guardan los datos almacenados en la memoria caché para esa sesión. El caché caduca después de que el usuario abandona esa página. No creo que el usuario tenga que cargar la página cada vez que carga el video desde un punto donde el video ha sido cargado. El usuario enfrentará este problema solo cuando el servidor esté borrando todos los datos de la caché. La etiqueta de video HTML5 admitirá esto, y guardará el video hasta el punto donde se ha cargado.

2. Esto no significa que se haya perdido la sesión, que el objeto (si está usando Flash Player) está buscando algunos datos de ese punto en particular o que la etiqueta de video html5 tenga algunos problemas debido a una falla en la conexión a INTERNET. o algunos otros errores del servidor.

3. Los metadatos se cargan automáticamente, hasta que use <audio preload="none"... esto hará que el navegador no descargue nada del servidor, puede usarlo como:
   <audio preload="auto|metadata|none"... Si no usa ninguno, no se descargará nada a menos que el usuario haga clic en el botón de reproducción, y los metadatos descargarán el nombre, el tiempo y otros metadatos del servidor, pero no el archivo de alguna manera, automáticamente comenzará a descargar tan pronto como se cargue la página.

Siempre te referiré a leer algunas documentaciones de jQuery. Como jQuery le permitirá cambiar y actualizar el contenido utilizando la API ajax y también será útil. Espero que tengas éxito! Aclamaciones.

Answer 2

Aunque la descripción de la respuesta aceptada es excelente, decidí actualizar su código de ejemplo, por varias razones:

• La tarea de renderización de progreso realmente debería ser activada solo en un evento de progress .
• La tarea de procesamiento de progreso se mezcla con otras tareas como dibujar la marca de tiempo y la posición del cursor de reproducción.
• El código hace referencia a varios elementos DOM por sus ID sin utilizar document.getElementById() .
• Los nombres de las variables estaban todos ocultos.
• Pensé que un bucle hacia delante for() era más elegante que un bucle hacia atrás while() .

Tenga en cuenta que he eliminado la cabeza de reproducción y la marca de tiempo para mantener el código limpio, ya que esta respuesta se centra únicamente en la visualización del búfer de video.

ENLACE AL VISUALIZADOR DE VIDEO BUFFER EN LÍNEA

Reescriba la función loop() la respuesta aceptada:

function drawProgress(canvas, buffered, duration){
    // I''ve turned off anti-aliasing since we''re just drawing rectangles.
    var context = canvas.getContext(''2d'', { antialias: false });
    context.fillStyle = ''blue'';

    var width = canvas.width;
    var height = canvas.height;
    if(!width || !height) throw "Canvas''s width or height weren''t set!";
    context.clearRect(0, 0, width, height); // clear canvas

    for(var i = 0; i < buffered.length; i++){
        var leadingEdge = buffered.start(i) / duration * width;
        var trailingEdge = buffered.end(i) / duration * width;
        context.fillRect(leadingEdge, 0, trailingEdge - leadingEdge, height);
    }
}

Answer 3

De acuerdo a

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
• https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
• https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges.start

el atributo buffered almacena información sobre todos los rangos de tiempo almacenados actualmente. A mi entender, si una parte almacenada se pierde, se elimina del objeto (en caso de que eso ocurra).

Esepcialmente, el último enlace parece ser muy útil para comprender el asunto (ya que ofrece un ejemplo de código), pero tenga en cuenta que estos son documentos de Mozilla y el soporte puede ser diferente en otros navegadores.

Para responder tu pregunta

Di que el video comienza. Continúa hasta la 1:45 por su cuenta (en ocasiones puede detenerse, esperando datos adicionales), después de lo cual de repente salté a las 32:45. Ahora, después de algún tiempo, si salto de nuevo a 1:27 (dentro del rango de tiempo inicialmente cargado y jugado, antes de dar el salto), ¿comenzará a reproducirse inmediatamente como ya estaba cargado antes?

Debería jugarse inmediatamente al saltar, a menos que se haya descargado el búfer de esa parte. Creo que es muy razonable suponer que los búferes o los rangos de búfer se descargan en algún momento si el tamaño total del búfer excede un cierto volumen.

Digamos que hago 5 o 6 saltos de este tipo, cada vez esperando unos segundos para que algunos datos se carguen después del salto. ¿Eso significa que el objeto almacenado almacenará todos esos rangos de tiempo?

Sí, todos los rangos almacenados deben ser legibles a través del atributo.

¿Se verificará si el objeto con búfer tiene un rango de tiempo que comienza en 0 (olvida la transmisión en vivo) y termina en la duración del video para asegurar que todo el recurso de video se haya cargado completamente?

Sí, este es el ejemplo de código en el último enlace. Al parecer, este es un método aplicable para determinar si todo el video se ha cargado.

if (buf.start(0) == 0 && buf.end(0) == v.duration)

Answer 4

La forma en que el video se almacena en búfer depende de la implementación del navegador y, por lo tanto, puede variar de un navegador a otro.

Varios navegadores pueden usar diferentes factores para determinar mantener o descartar una parte del búfer. Los segmentos antiguos, el espacio en disco, la memoria y el rendimiento son factores típicos.

La única forma de saber realmente es "ver" lo que el navegador tiene o está cargando.

Para esto hice un visor de búfer que muestra qué parte está en el búfer. El espectador mostrará las partes actuales y todas las partes del búfer completo:

VISOR DE BUFFER EN LÍNEA

Por ejemplo, en Chrome jugué unos segundos, luego salté a unos 30 segundos y puedes ver que comienza a cargar otra parte a partir de esa posición.

(El búfer también parece estar limitado a fotogramas clave, por lo que es posible descodificar los n cuadros en ese búfer. Esto significa que el búfer puede comenzar a cargar datos un poco antes de la posición real).

Proporcioné un video de demostración de aproximadamente 1 minuto de duración, sin embargo, esto no es lo suficientemente largo como para realizar las pruebas adecuadas. Gratuito para suministrar enlaces de video que contengan videos más largos (o compártelos si quiere que actualice la demostración con esto).

La función principal recorrerá el objeto buffered en el elemento del video. Mostrará todas las partes que existen en el lienzo justo debajo del video que se muestra en rojo.

Puede hacer clic (poco no arrastrar) en este visor para mover el video a diferentes posiciones.

/// buffer viewer loop (updates about every 2nd frame)
function loop() {

    var b = vid.buffered,  /// get buffer object
        i = b.length,      /// counter for loop
        w = canvas.width,  /// cache canvas width and height
        h = canvas.height,
        vl = vid.duration, /// total video duration in seconds
        x1, x2;            /// buffer segment mark positions

    /// clear canvas with black
    ctx.fillStyle = ''#000'';
    ctx.fillRect(0, 0, w, h);

    /// red color for loaded buffer(s)
    ctx.fillStyle = ''#d00'';

    /// iterate through buffers
    while (i--) {
        x1 = b.start(i) / vl * w;
        x2 = b.end(i) / vl * w;
        ctx.fillRect(x1, 0, x2 - x1, h);
    }

    /// draw info
    ctx.fillStyle = ''#fff'';

    ctx.textBaseline = ''top'';
    ctx.textAlign = ''left'';
    ctx.fillText(vid.currentTime.toFixed(1), 4, 4);

    ctx.textAlign = ''right'';
    ctx.fillText(vl.toFixed(1), w - 4, 4);

    /// draw cursor for position
    x1 = vid.currentTime / vl * w;

    ctx.beginPath();
    ctx.arc(x1, h * 0.5, 7, 0, 2 * Math.PI);
    ctx.fill();

    setTimeout(loop, 29);
}