reproducir - video html5 autoplay

Video HTML5: Force abort of buffering

Question

¿Cómo se fuerza un evento de aborto en un video HTML5? Tengo una superposición, donde, cuando la cierro, el video debe pausar la reproducción y luego detener el almacenamiento en búfer . Sin embargo, mi conexión a internet continúa volviéndose loca. Oh, estoy usando Chrome 7.0.5 en Mac OS X 10.6.

He intentado un par de cosas, ninguna de ellas ha funcionado:

(Para aquellos que no están familiarizados con XUI, x $ es como la función de envoltura jQuery)

Primero, despachar un evento HTML abortado:

var videoEl = x$(''#video_el'')[0];
videoEl.pause();
var evObj = document.createEvent(''HTMLEvents'');
evObj.initEvent(''abort'', false, false);
videoEl.dispatchEvent(evObj);

Luego, cambiando el src y luego forzando una carga:

var videoEl = x$(''#video_el'')[0];
videoEl.pause();
videoEl.src = "";
videoEl.load(); //tried with and without this step

EDITAR: mi elemento de video se ve así:

<video id="video_el" src="<video_url>" preload="none" controls="controls" />

De nuevo, ninguno de estos funciona. ¿Alguien se encontró con este problema antes? ¿Alguna sugerencia?

En resumen, estoy tratando de forzar a un elemento de video HTML5 a detener el almacenamiento en búfer.

¡Gracias!

Answer 1

Con preload = "none", así es como obligo a abortar el almacenamiento en búfer después de pausar el video, y luego reinicié la reproducción en la ubicación pausada usando jQuery.

<video id="video_el" src="<video_url>" preload="none" controls="controls" />    

<script>
jQuery(function() {

  var video = jQuery(''video'').get(0);

  video.addEventListener(''pause'',function(){
     var tmp_src = video.src;
     var playtime = video.currentTime;
     video.src = '''';
     video.load();
     video.src = tmp_src;
     video.currentTime = playtime;
  });

});
</script>

Answer 2

De hecho, puede hacer lo mismo configurando el atributo src como un archivo php / aspx con algunos parámetros para leer el contenido del archivo y recuperar los datos como tipo equivalente (por ejemplo, Content-Type: video/mp4 ). PERO no funciona en IE 11 (qué sorpresa: D), entonces tendrá que hacer el truco anterior solo para este magnífico navegador.

Utilizar esta...

<video id="v1" preload="none">
  <source src="video.php?id=24" type="video/mp4">
</video>

En lugar de esto...

<video id="v2" preload="none">
  <source src="video-24.mp4" type="video/mp4">
</video>

Como inconveniente, no podrá determinar la longitud total del video, pero para resolver este problema, que no es tan grande, podría almacenar este valor en su base de datos o simplemente hacer otro pequeño truco.

He probado con Chrome 32, Firefox 26, Opera 18 e IE 11 el siguiente script

setInterval(function() {
    var r = [];

    try {
        r.push(v1.buffered.end(0));
    } catch(e) {
        r.push(''nahh'');
    };

    try {
        r.push(v2.buffered.end(0));
    } catch(e) {
        r.push(''second nahh'');
    };

    console.log(r.join('', ''));
}, 500);

En mis pruebas locales ...

Firefox 26 Después de presionar play, SIEMPRE guardó el archivo completo.

IE 11 (considerando src="video-24.mp4" , porque el otro no funciona) Después de presionar Reproducir, SIEMPRE guardó el fragmento de archivo por fragmento incluso si estaba en pausa e ignora por completo la preload="none" atributo.

Chrome 32 funciona perfectamente (lo mismo para Opera 18).

Answer 3

El paso clave parece ser no establecer src en un valor en blanco antes de llamar a load() . He tenido éxito haciéndolo así:

var wasPlaying = !audioPlayer.paused;
audioPlayer.currentTime = 0.0; // Optional -- can be left out for pause
audioPlayer.pause();

if (wasPlaying) { // This prevents the browser from trying to load the entire source
    audioPlayer.load();
}

Tanto en Chrome como en Firefox en Win10, esto dispara un evento abortar. En mi caso específico, esto fue necesario para cerrar los enchufes que de lo contrario permanecerían abiertos indefinidamente, lo que llevó a golpear las seis conexiones por límite de servidor con varios reproductores que se utilizan en la misma página.

Answer 4

Ok, entonces en los últimos días he estado luchando con este problema.
Aquí está mi análisis y solución:

En resumen, el problema que traté de resolver:
Noté que el reproductor HTML5 no deja de descargar cuando el reproductor está en pausa (en absoluto, ni siquiera después de un período de tiempo razonable). Trabajando con un flujo de audio 24/7 y desarrollando un sitio web móvil, me di cuenta de que esto está lejos de ser óptimo para mis visitantes considerando el alto uso de datos si dejan el sitio abierto, aunque creo que haría muy feliz a algunas compañías de telecomunicaciones al "pasar por alto". " este problema...
Solo para aclarar, realmente no me importan los archivos con una longitud fija. La descarga del archivo completo es la mayoría de las veces una funcionalidad necesaria para ver recursos en línea (piense en una conexión lenta), por lo que no es algo que trate de evitar.

Análisis:
El elemento de audio HTML5 no tiene una función stop (), ni tiene una opción donde puede establecer la cantidad de datos que está permitido almacenar en búfer, o una forma de decir que desea que el elemento deje de almacenar en búfer: no confundir esto con la función ''precargar'', esto solo se aplica al elemento antes de hacer clic en el botón reproducir.
No tengo idea de por qué esto es así y por qué esta funcionalidad no está disponible. Si alguien puede explicarme por qué estas funciones cruciales no se implementan en un estándar que debería mejorar y estandarizar el desarrollo web para teléfonos móviles, me gustaría saberlo.

Solución:
La única solución de trabajo que encontré para implementar una (tipo de) función de detención en tu elemento de audio es la siguiente:
1. Pausa el reproductor actual: puedes conectar el evento de pausa en el reproductor a través de audio.addEventListener (''pausa'', tuFunción);
2. Configure la fuente como vacía - audio.src = "";
3. Cargue el src - audio.load ();
4. Eliminar todo el elemento de audio
5. Inserta un nuevo elemento de audio HTML5 sin la fuente definida
6. Configure la fuente (la fuente que estaba allí en primer lugar) - audio.src = "url fuente anterior
7. Vuelva a enlazar el evento pausa - audio.addEventListener (''pausa'', función actual);

Inyectar completamente un nuevo reproductor de audio HTML5 es necesario para iOS. Simplemente restablecer el src y luego cargarlo ocasiona que el reproductor se "reproduzca automáticamente" en mi caso ...

Para las personas perezosas (incluye jQuery):

var audio = $("audio").get(0);
audio.pause(0);
var tmp = audio.src;
audio.src = "";
audio.load();
$("audio").remove();

$("#audio-player").html("<audio controls preload=''none''></audio>");<br>
audio = $("audio").get(0);
audio.src = tmp;
audio.addEventListener(''pause'', current-function);

Presionando pausa causará que su visitante pierda su ubicación actual en el archivo de audio / video y se reiniciará. No tengo solución para este problema. Por otra parte, si se trata de una transmisión en vivo, esta solución debería estar bien.

Espero que esto ayude.

Answer 5

Vea aquí: http://dev.w3.org/html5/spec/video.html#attr-media-preload

¿Tal vez podría establecer preload para none ?

En caso de que eso no funcione: ¿Podría recuperar sus atributos, eliminarlos, insertar un nuevo elemento de video y darle a ese elemento los atributos guardados?