2010-11-01 7 views
44

¿Cómo se puede forzar un evento de interrupción 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 memoria intermedia. 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.Vídeo HTML5: aborto forzado del almacenamiento en memoria intermedia

he intentado un par de cosas - ninguno de ellos ha trabajado:

(Para los que no conocen XUI, x $ es como la función de envolver jQuery)

En primer lugar, el envío de un archivo HTML de aborto Evento:

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

a continuación, el cambio de la src y luego forzando una carga:

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

EDIT: Mi elemento de vídeo se ve algo como esto:

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

Una vez más, ninguno de estos trabajos. ¿Alguien se encontró con este problema antes? ¿Alguna sugerencia?

En resumen, intento obligar a un elemento de video HTML5 a detener el almacenamiento en búfer.

Gracias!

Respuesta

44

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

En resumen, el problema que trataron de resolver:
me di cuenta de que el reproductor HTML5 no se detiene la descarga cuando se detiene el jugador (en absoluto, ni siquiera después de un período razonable de hora). 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 de parada(), ni tampoco tiene una opción donde se puede establecer la cantidad de datos que se permite para amortiguar, o una forma de decir que desea que el elemento para detener el almacenamiento en búfer - No confunda esto con la función 'precargar', esto solo se aplica al elemento antes de hacer clic en el botón reproducir.
No tengo ni 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 que encontré trabajando para implementar un (tipo de) la función de parada en su elemento de audio es el siguiente: 1.
Pausa el jugador actual - se puede enlazar el evento de pausa en el reproductor a través de audio.addEventListener ('pause', yourFunction);
2. Establezca la fuente en empty - audio.src = "";
3. Cargue el src - audio.load();
4. Elimine todo el elemento de audio
5. Inserte un nuevo elemento de audio HTML5 sin la fuente definida
6. Establezca la fuente (la fuente que estaba allí en primer lugar) - audio.src = "url de fuente anterior
7. Rehook el evento de pausa - audio.addEventListener ('pausa', la corriente de función);.

completamente la inyección de un nuevo reproductor de audio HTML5 es necesaria para iOS simplemente restablecer el src y colocarla después hace que el jugador para 'reproducir automáticamente' en mi caso ...

Para la gente perezosa (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); 

pausa Al pulsar hará que su visitante a perder allí la ubicación actual en el archivo de audio/vídeo y comenzará de nuevo. 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.

+5

¿Por qué no solo almacena la hora actual en una variable temporal, y cuando el usuario hace clic en el botón de reproducción, configura el reproductor de audio a ese valor? – franzlorenzon

+2

Usted puede hacer eso, pero desarrollé esto para descargar una transmisión en vivo. Recoger una transmisión en vivo en el punto donde pulsaste detener es un poco inútil;) Pero para archivos muy grandes, definitivamente es un muy buen punto que puedo agregar. – Ruben

+1

Esta es una mala solución, ya que lanzará eventos de 'error' en un intento de cargar la página web actual (es decir, http://127.0.0.1), que genera una carga artificial adicional. He intentado 'null' y' undefined' pero esos solo agregan a la ruta de la página actual. Si no le importan los errores, tiene más sentido usar 'src =" about: blank "'. –

0

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

Tal vez usted podría fijar preload-none?

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

+0

Gracias por su respuesta. Debería haber especificado cómo se ve mi etiqueta de video. Lo he pegado. En resumen: ya tiene el atributo preload = "none". Probaré el asunto 'En caso de que eso no funcione' y te llevaré el bac :) –

+1

Guau, incluso cuando destruyo el elemento de video, el navegador _continúa almacenando el video_. Este es un comportamiento bastante extraño y podemos estar viendo un error de Chrome HTML5 ... Gracias de nuevo por su ayuda en esto. –

+0

@radio: Supongo que volver a cargar la página con un anclaje que le dice a un javascript dónde desplazarse no es una opción aceptable. – thejh

0

En realidad, 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 el 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.

Utilice 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 un inconveniente que no será capaz de determinar la duración del vídeo, pero para resolver este problema, que no es tan grande, podrías almacenar este valor en tu base de datos o simplemente hacer otro pequeño truco.

He probado el uso de Chrome 32, Firefox 26, Opera 18 y 11 IE 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 localhost ...

Firefox 26 después de que había presionado juego, SIEMPRE guardó el archivo completo.

IE 11 (considerando src="video-24.mp4", primo del otro no funcionan) Después de que hubiera pulsado juego, siempre amortiguada por el trozo de archivos trozo incluso si se ha detenido completamente y pasa por alto el atributo preload="none".

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

5

Con preload = "none", así es como obligo a abortar el almacenamiento en búfer después de pausar el video, y luego reanuda 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> 
Cuestiones relacionadas