Video HTML5 – Percentuale caricata?

Qualcuno sa quale evento o proprietà devo interrogare per ottenere una cifra percentuale dell’importo caricato da un video HTML5? Voglio disegnare una barra “caricata” in stile CSS la cui larghezza rappresenta questa figura. Proprio come You Tube o qualsiasi altro video player.

Quindi, proprio come you tube, un video verrà riprodotto anche se l’intero video non è stato caricato e darà all’utente il feedback su quanta parte del video è stata caricata e verrà caricata.

Proprio come la barra rossa su YouTube:

inserisci la descrizione dell'immagine qui

L’evento progress è triggersto quando alcuni dati sono stati scaricati, fino a tre volte al secondo. Il browser fornisce un elenco di intervalli di supporti disponibili tramite la proprietà buffered ; una guida approfondita a questo è disponibile su buffering multimediale, ricerca e intervalli di tempo su MDN.

Inizio carico singolo

Se l’utente non salta il video, il file verrà caricato in un TimeRange e la proprietà buffered avrà un intervallo:

 ------------------------------------------------------ |=============| | ------------------------------------------------------ 0 5 21 | \_ this.buffered.end(0) | \_ this.buffered.start(0) 

Per sapere quanto è grande questo intervallo, leggerlo in questo modo:

 video.addEventListener('progress', function() { var loadedPercentage = this.buffered.end(0) / this.duration; ... // suggestion: don't use this, use what's below }); 

Inizia il caricamento multiplo

Se l’utente modifica la posizione della testina durante il caricamento, può essere triggersta una nuova richiesta. Ciò fa sì che la proprietà buffered sia frammentata:

 ------------------------------------------------------ |===========| |===========| | ------------------------------------------------------ 1 5 15 19 21 | | | \_ this.buffered.end(1) | | \_ this.buffered.start(1) | \_ this.buffered.end(0) \_ this.buffered.start(0) 

Si noti come cambia il numero del buffer.

Poiché non è più un carico contiguo, la “percentuale caricata” non ha più molto senso. Vuoi sapere cos’è l’attuale TimeRange e quanta parte viene caricata. In questo esempio si ottiene dove deve iniziare la barra di caricamento (poiché non è 0) e dove dovrebbe terminare.

 video.addEventListener('progress', function() { var range = 0; var bf = this.buffered; var time = this.currentTime; while(!(bf.start(range) <= time && time <= bf.end(range))) { range += 1; } var loadStartPercentage = bf.start(range) / this.duration; var loadEndPercentage = bf.end(range) / this.duration; var loadPercentage = loadEndPercentage - loadStartPercentage; ... }); 

Gli altri avventurieri non hanno funzionato per me quindi ho iniziato a scavare in questo problema e questo è quello che mi è venuto in mente. Le soluzioni utilizzano jquery per creare una barra di avanzamento.

 function loaded() { var v = document.getElementById('videoID'); var r = v.buffered; var total = v.duration; var start = r.start(0); var end = r.end(0); $("#progressB").progressbar({value: (end/total)*100}); } $('#videoID').bind('progress', function() { loaded(); } ); 

Spero che questo aiuti anche gli altri

Correzione percentuale per stringa caricata. Emissione qualcosa come 99% caricato all’interno dell’elemento #loaded …

 function loaded() { var v = document.getElementById('videoID'); var r = v.buffered; var total = v.duration; var start = r.start(0); var end = r.end(0); var newValue = (end/total)*100; var loader = newValue.toString().split("."); $('#loaded').html(loader[0]+' loaded...'); $("#progress").progressbar({ value: newValue }); }