Evento HTML5 'avanzamento' non attivo

Sto costruendo un'app di streaming web di a/v html5. Questa domanda fa riferimento alla parte audio del progetto, ma sono sicuro che mi imbatterò in una situazione simile quando inizierò sulla parte video. Il mio dispositivo di destinazione è il browser safari dell'iPad (quindi, perché devo fare questo html5). La riproduzione funziona bene, ma ho una barra di caricamento che deve riflettere quanta parte della traccia è stata caricata. Seguendo le specifiche w3, ho cercato di attuare questa seguente modo utilizzando jQuery:Evento HTML5 'avanzamento' non attivo

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

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

Ciò non ha funzionato. 'that.player.buffered' restituisce un oggetto TimeRanges e TimeRanges hanno un metodo 'end (index)' che restituisce la posizione di riproduzione della fine del buffer in secondi per il TimeRange specificato da 'index'. TimeRanges ha anche una proprietà .length che ti dice quante TimeRanges sono incapsulate dall'oggetto. Quando ho provato a registrare quella proprietà ho trovato che TimeRanges.length = 0, che significa che nessun TimeRang viene passato indietro. Inoltre, quando ho buttato le dichiarazioni di registrazione nella funzione associata, ho scoperto che l'evento "progresso" non è mai stato attivato. Ho funzioni separate per gli eventi 'loadedmetata' e 'timeupdate' che seguono un formato simile e quelli si attivano come previsto. Ho provato altri metodi per catturare eventi senza alcun risultato:

Nessuno di questi ha attivato il messaggio della mia console. La mia dichiarazione di tag audio è la seguente:

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

cosa sto facendo di sbagliato qui?

UPDATE: Sto usando wowzamediaserver per gestire lo streaming http. Non so se questo potrebbe avere qualcosa a che fare con questo.

ANCORA un altro aggiornamento: mi rendo conto di non avere una fonte nel mio tag audio, che è perché ho impostato in modo dinamico utilizzando jQuery, come segue:

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

di nuovo io non sto avendo problemi di riproduzione in modo tale non dovrebbe avere alcuna relazione con il mio problema, ma voglio solo darti ragazzi più chiari possibile.

fonte

2011-08-18 aamiri

Sto avendo lo stesso problema quasi 2 anni dopo - io credo che sia dovuta all'utilizzo playlist.m3u8, ma non hanno ancora trovato un modo intorno ad esso. Hai ancora fortuna? – GDP

La specifica HTML5 è ancora un progetto in fase di sviluppo in modo da browser questo supporto è essenzialmente conforme a una specifica ancora da finalizzare. Per questo motivo non mi aspetto che le loro funzionalità HTML5 siano completamente funzionanti ...

fonte

2011-08-18 19:49:21 maerics

Non sono sicuro di quale sia l'attuale panorama di implementazione per l'evento progress, ma quando stavo lavorando a un player audio HTML5 diversi mesi fa ricordo che non riuscivo a farlo funzionare in Safari o Chrome . Alla fine ho usato un timer. Probabilmente niente che non riusciva a capire, ma qui è una versione semplificata:

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); 
};

Il codice 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>

fonte

2011-08-18 19:47:02 Daniel

Gli eventi di avanzamento non funzionano in molti casi di utilizzo a partire da iOS 8.1. Secondo la documentazione Apple:

Nota: Sull'iPad, Safari non inizia il download finché l'utente non fa clic sul poster o sul segnaposto. Attualmente, i download iniziati in questo modo non generano eventi di progresso.

Posso confermare che la riproduzione con trigger javascript non attiva gli eventi di avanzamento. Non ho provato a utilizzare i controlli nativi audio HTML5 <audio controls></audio.

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

fonte

2014-12-23 16:47:55 mrbmc

Evento HTML5 'avanzamento' non attivo

risposta

Problemi correlati