Caratteristiche degli attributi con buffering video HTML5

Sto progettando un player video HTML5 personalizzato. Quindi, avrà il suo slider personalizzato per simulare l’avanzamento del video, quindi ho bisogno di capire l’intero buffer di un video HTML5 .

Mi sono imbattuto in questo articolo: Video Buffering . Dice che l’object bufferizzato è costituito da diversi intervalli di tempo in ordine lineare di ora di inizio. Ma non ho potuto scoprire quanto segue:

  1. Dì che il video inizia. Continua fino a 1:45 da solo (a volte si blocca forse, in attesa di ulteriori dati), dopo di che salto all’improvviso alle 32:45. Ora, dopo un po ‘di tempo, se salgo all’1.27 (entro l’intervallo di tempo inizialmente caricato e riprodotto, prima di fare il salto), inizierà a giocare immediatamente poiché era già stato caricato in precedenza? O è che da quando ho fatto un salto, quella parte è persa e dovrà essere recuperata di nuovo? In entrambi i casi, il comportamento è coerente per tutti questi scenari?

  2. Diciamo che faccio 5 o 6 salti simili, ogni volta che attendo qualche secondo per caricare alcuni dati dopo il salto. Significa che l’object buffered avrà tutti gli intervalli di tempo memorizzati? O alcuni potrebbero perdersi? È una sorta di pila di cose, dove gli intervalli precedenti verranno eliminati mentre vengono caricati più intervalli a causa di ulteriori salti?

  3. Verificherà se l’object buffered ha un intervallo di tempo che inizia da 0 (dimentica lo streaming live) e termina alla durata della durata del video per assicurare che l’intera risorsa video sia stata caricata completamente? In caso contrario, c’è un modo per sapere che l’intero video è stato scaricato, e qualsiasi parte è ricercabile, da cui il video può essere riprodotto continuamente senza un attimo di ritardo?

Le specifiche del W3C non sono molto chiare su questo, e inoltre non riesco a trovare una risorsa video remota sufficientemente grande (diciamo più di un’ora) da testare.

La modalità di buffering del video dipende dall’implementazione del browser e pertanto può variare da browser a browser.

Diversi browser possono utilizzare diversi fattori per determinare se conservare o eliminare una parte del buffer. Vecchi segmenti, spazio su disco, memoria e prestazioni sono fattori tipici.

L’unico modo per sapere veramente è “vedere” ciò che il browser ha o sta caricando.

Per questo ho creato un buffer-viewer che mostra quale parte si trova nel buffer. Il visualizzatore mostrerà la corrente e tutte le parti dell’intero buffer:

VISUALIZZATORE DI BUFFER ONLINE

Ad esempio, in Chrome ho giocato alcuni secondi, quindi ho saltato per circa 30 secondi e puoi vedere che inizia a caricare un’altra parte partendo da quella posizione.

(Anche il buffer sembra essere limitato ai fotogrammi chiave, quindi è ansible decodificare i fotogrammi n in quel buffer, il che significa che il buffer può iniziare a caricare i dati un po ‘prima della posizione effettiva).

Esempio

Ho fornito un video dimostrativo della durata di 1 minuto, tuttavia questo non è abbastanza lungo per eseguire test appropriati. Gratuito gratuitamente per fornire collegamenti video che contengono video più lunghi (o si prega di condividere se vuoi che io aggiorni la demo con questo).

La funzione principale eseguirà l’iterazione attraverso l’object buffered sull’elemento video. Renderà tutte le parti esistenti sulla canvas proprio sotto il video che mostra in rosso.

Puoi fare clic su (bit non trascinare) su questo visualizzatore per spostare il video in posizioni diverse.

 /// buffer viewer loop (updates about every 2nd frame) function loop() { var b = vid.buffered, /// get buffer object i = b.length, /// counter for loop w = canvas.width, /// cache canvas width and height h = canvas.height, vl = vid.duration, /// total video duration in seconds x1, x2; /// buffer segment mark positions /// clear canvas with black ctx.fillStyle = '#000'; ctx.fillRect(0, 0, w, h); /// red color for loaded buffer(s) ctx.fillStyle = '#d00'; /// iterate through buffers while (i--) { x1 = b.start(i) / vl * w; x2 = b.end(i) / vl * w; ctx.fillRect(x1, 0, x2 - x1, h); } /// draw info ctx.fillStyle = '#fff'; ctx.textBaseline = 'top'; ctx.textAlign = 'left'; ctx.fillText(vid.currentTime.toFixed(1), 4, 4); ctx.textAlign = 'right'; ctx.fillText(vl.toFixed(1), w - 4, 4); /// draw cursor for position x1 = vid.currentTime / vl * w; ctx.beginPath(); ctx.arc(x1, h * 0.5, 7, 0, 2 * Math.PI); ctx.fill(); setTimeout(loop, 29); } 

Secondo

l’attributo buffered contiene informazioni su tutti gli intervalli di tempo attualmente memorizzati nel buffer. A mio avviso, se una porzione bufferizzata viene persa, viene rimossa dall’object (nel caso in cui ciò accada mai).

Esattamente l’ultimo collegamento sembra essere molto utile per comprendere la questione (dal momento che offre un esempio di codice), ma tenere presente che questi sono documenti mozilla e il supporto potrebbe essere diverso negli altri browser.

Per rispondere alle tue domande

Dì che il video inizia. Continua fino a 1:45 da solo (a volte si blocca forse, in attesa di ulteriori dati), dopo di che salto all’improvviso alle 32:45. Ora, dopo un po ‘di tempo, se salgo all’1.27 (entro l’intervallo di tempo inizialmente caricato e riprodotto, prima di fare il salto), inizierà a giocare immediatamente poiché era già stato caricato in precedenza?

Dovrebbe essere riprodotto immediatamente quando si fa il salto indietro, a meno che il buffer di quella porzione non sia stato scaricato. Penso che sia ragionevole presumere che i buffer o gli intervalli di buffer vengano scaricati a un certo punto se il buffer generale supera un certo volume.

Diciamo che faccio 5 o 6 salti simili, ogni volta che attendo qualche secondo per caricare alcuni dati dopo il salto. Significa che l’object memorizzato avrà tutti gli intervalli di tempo memorizzati?

Sì, tutti gli intervalli bufferizzati dovrebbero essere leggibili tramite l’attributo.

Verificherà se l’object bufferizzato ha un intervallo di tempo che inizia a 0 (dimentica lo streaming live) e termina alla durata della durata del video, assicurando che l’intera risorsa video sia stata caricata completamente?

Sì, questo è l’esempio di codice nell’ultimo collegamento. Apparentemente questo è un metodo applicabile per determinare se l’intero video è stato caricato.

 if (buf.start(0) == 0 && buf.end(0) == v.duration) 
  1. Quasi ogni browser salva i dati memorizzati nel buffer nella cache per quella sessione. La cache scade dopo che l’utente si allontana da quella pagina. Non penso che l’utente dovrà caricare la pagina ogni volta che carica il video da un punto in cui è stato caricato il video. L’utente affronterà questo problema solo quando il server sta eliminando tutti i dati della cache. Il tag video HTML5 supporterà questo e salverà il video fino al punto in cui è stato caricato.

  2. Non significa che la sessione è stata persa, significa che l’object (se si sta utilizzando il flash player) sta cercando alcuni dati da quel particolare punto o il tag video HTML5 sta avendo alcuni problemi a causa dell’errore della connessione INTERNET, o altri errori del server.

  3. I metadati vengono caricati automaticamente, fino a quando non usi questo

Ti rimanderò sempre per leggere alcune documentazioni di jQuery. Poiché jQuery ti consente di modificare e aggiornare il contenuto utilizzando API ajax e sarà utile anche. Spero che tu abbia successo! Saluti.

Sebbene la descrizione della risposta accettata sia eccellente, ho deciso di aggiornare il suo esempio di codice, per diversi motivi:

  • L’attività di rendering progress dovrebbe essere effettivamente triggersta solo su un evento di progress .
  • L’attività di rendering in corso è confusa con altre attività come il disegno del timestamp e la posizione del punto di riproduzione.
  • Il codice si riferisce a diversi elementi DOM dai loro ID senza usare document.getElementById() .
  • I nomi delle variabili erano tutti oscurati.
  • Ho pensato che un ciclo for() fosse più elegante di un ciclo while() all’indietro.

Nota che ho rimosso l’indicatore di riproduzione e il timestamp per mantenere pulito il codice, poiché questa risposta si concentra esclusivamente sulla visualizzazione del buffer video.

COLLEGAMENTO A VIDEO VIDEO BUFFER VISUALISER

Riscrivi della funzione loop() della risposta accettata:

 function drawProgress(canvas, buffered, duration){ // I've turned off anti-aliasing since we're just drawing rectangles. var context = canvas.getContext('2d', { antialias: false }); context.fillStyle = 'blue'; var width = canvas.width; var height = canvas.height; if(!width || !height) throw "Canvas's width or height weren't set!"; context.clearRect(0, 0, width, height); // clear canvas for(var i = 0; i < buffered.length; i++){ var leadingEdge = buffered.start(i) / duration * width; var trailingEdge = buffered.end(i) / duration * width; context.fillRect(leadingEdge, 0, trailingEdge - leadingEdge, height); } }