Evento de audio HTML5 'progress' no se activa

Estoy creando una aplicación web de transmisión html5 a/v. Esta pregunta se refiere a la parte de audio del proyecto, pero estoy seguro de que me encontraré con una situación similar cuando empiece con la porción de video. Mi dispositivo de destino es el navegador safari del iPad (de ahí que tenga que hacer esto html5). La reproducción funciona bien, pero tengo una barra de carga que debe reflejar qué parte de la pista se ha cargado. Siguiendo la especificación W3, he intentado poner en práctica esta de la siguiente manera usando jQuery:Evento de audio HTML5 'progress' no se activa

var that = this; 
that.player = $('audio')[0]; 

$('that.player').bind('progress',function(){ 
    var buffer = that.player.buffered.end(0)  
    that.updateLoadBuffer(buffer); 
});

Esto no funcionó. 'that.player.buffered' devuelve un objeto TimeRanges, y TimeRanges tiene un método 'end (index)' que devuelve la posición de reproducción del final del buffer en segundos para el TimeRange especificado por 'index'. TimeRanges también tiene una propiedad .length que te dice cuántos TimeRanges están encapsulados por el objeto. Cuando traté de registrar esa propiedad, encontré que TimeRanges.length = 0, lo que significa que no se transfieren TimeRanges. También cuando lancé declaraciones de registro en la función vinculada, encontré que el evento 'progreso' nunca se activó. Tengo funciones separadas para los eventos 'loadedmetata' y 'timeupdate' que siguen un formato similar, y aquellos se disparan como se esperaba. Intenté otros métodos para capturar eventos en vano:

that.player.onprogress = function(e){ 
    console.log('progressEvent heard'); 
}; 

that.player.addEventListener('progress',progressHandler, false) 
function progressHandler(e){ 
    console.log('progressEvent heard'); 
};

Ninguno de estos desencadenó mi mensaje de consola. Mi declaración de etiqueta de audio es la siguiente:

<audio style="width:0;height:0;"></audio>

¿Qué estoy haciendo mal aquí?

ACTUALIZACIÓN: Estoy usando wowzamediaserver para manejar la transmisión http. No sé si eso podría tener algo que ver con eso.

otra actualización: me doy cuenta que no tengo una fuente en mi etiquetas de audio, que se debe a lo fijo dinámicamente usando jQuery, de la siguiente manera:

$('audio').attr('src','http://my.wowza.server:1935/myStreamingApp/_definst_/mp3:path/to/my/track/audio.mp3/playlist.m3u8');

de nuevo, no estoy teniendo problemas de reproducción por lo que este no debería tener ningún impacto en mi problema, pero solo quiero darles a ustedes la mejor idea posible.

Fuente

2011-08-18 aamiri

estoy teniendo el mismo problema casi 2 años más tarde - creo que es debido al uso de playlist.m3u8, pero todavía tienen que encontrar una manera de evitarlo. ¿Alguna suerte todavía? – GDP

La especificación de HTML 5 es todavía un borrador en fase de desarrollo por lo que los navegadores que lo soportan se ajustan esencialmente a una especificación aún por finalizar. Como tal, no esperaría que sus características HTML5 sean completamente funcionales ...

Fuente

2011-08-18 19:49:21 maerics

No estoy seguro de cuál es el panorama de implementación actual para el evento progress, pero cuando estaba trabajando en un reproductor de audio HTML5 hace varios meses recuerdo que no pude disparar en Safari o Chrome . Terminé usando un temporizador en su lugar. Probablemente nada que no podía entender, pero aquí es una versión simplificada:

The Script:

$(document).ready(function(){ 
    audio = $('body').find("audio").get(0); 
}); 

function play() { 
    audio.play(); 
    int = window.setInterval(updateProgress, 30); 
} 

function pause() { 
    audio.pause(); 
    window.clearInterval(int); 
} 

function updateProgress() { 
    progress_seconds = Math.ceil(audio.currentTime); 
    progress_percent = Math.ceil(audio.currentTime/audio.duration * 100); 
    $('#progress_seconds').html('Seconds: ' + progress_seconds); 
    $('#progress_percent').html('Percent: ' + progress_percent); 
};

El HTML:

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="so.js"></script> 
    <title></title> 
</head> 
<body> 

<audio> 
    <source src="audio.mp3" type="audio/mp3"> 
</audio> 

<a id="play" href="#" onclick="play();">Play</a> 
<a id="pause" href="#" onclick="pause();">Pause</a> 

<span id="progress_seconds">_</span> 
<span id="progress_percent">_</span> 

</body> 
</html>

Fuente

2011-08-18 19:47:02 Daniel

Los sucesos de progreso no funcionarán en muchos casos de uso a partir de iOS 8.1. Según la documentación de Apple:

Nota: en el iPad, Safari no comienza a descargarse hasta que el usuario hace clic en el cartel o en el marcador de posición. Actualmente, las descargas iniciadas de esta manera no emiten eventos de progreso.

Puedo corroborar que la reproducción activada por javascript no disparará los eventos de progreso. No he probado utilizando los controles nativos de audio HTML5 <audio controls></audio.

Ref: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

Fuente

2014-12-23 16:47:55 mrbmc

Evento de audio HTML5 'progress' no se activa

Respuesta

Cuestiones relacionadas