Un altro: Forza Chrome per bufferizzare completamente il video mp4

Ho visto alcuni thread su questo, ma senza risposte, quindi ho pensato di aggiungerne un altro al cortile delle pagine di youtube correlate.

Ho un video mp4 da 100MB che deve essere scaricato completamente dal browser,

Tuttavia, non vi è alcun evento che si verifica quando è stato scaricato completamente e Chrome sembra interrompere il buffering di altri video finché il tempo del video corrente non ha quasi raggiunto la fine del buffer, quindi richiede di più.

Come posso ottenere che i browser scarichino completamente il video e lo bufferizzino al 100%?

Grazie

Purtroppo Chrome – come altri browser HTML5 – cerca di essere intelligente su ciò che sta scaricando ed evita l’uso non necessario della larghezza di banda … questo significa che a volte ci rimane un’esperienza sub-ottimale (ironicamente YouTube ne soffre così tanto che ci sono estensioni forzare più pre-buffering!)

Detto questo, non ho trovato che questo sia richiesto troppo spesso con un buon server e una buona connessione – ma se hai bisogno di qualcosa l’unica soluzione che ho trovato è un po ‘di un martello … usa Ajax per scaricare il file che vuoi giocare e quindi caricarlo nella sorgente per l’elemento video.

L’esempio seguente presuppone che il tuo browser supporti m4v / mp4 – probabilmente vorrai utilizzare il test canPlayType per selezionare il formato video più appropriato per i tuoi utenti se non puoi garantire (ad esempio) Chrome. Dovrai anche testare per vedere quanto gestisce i video delle dimensioni che desideri (ne ho provati alcuni abbastanza grandi ma non sono sicuro di quale limite superiore si gestirà in modo affidabile)

L’esempio è anche piuttosto semplice … dà il via alla richiesta e non comunica nulla all’utente mentre sta caricando – con il tuo video di dimensioni probabilmente vorrai mostrare una barra di avanzamento solo per tenerli interessati .. .

l’altro svantaggio di questo processo è che non inizierà la riproduzione fino a quando non avrai scaricato completamente il file – se vuoi approfondire la visualizzazione del video in modo dinamico dal tuo buffer, allora dovrai iniziare a scavare nel margine sanguinante ( al momento) mondo di MediaSource come descritto in post come http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/

    Preload video via AJAX       

La mia soluzione è per un video molto più piccolo rispetto all’OP descritto, tuttavia il comportamento desiderato è lo stesso: Impedisci al video di iniziare la riproduzione finché il video non è completamente bufferizzato. Il video dovrebbe essere riprodotto per gli utenti di ritorno se il video è già in cache.

La risposta qui sotto è stata fortemente influenzata da questa risposta ed è stata testata su Chrome, Safari e Firefox.

File Javascript:

  $(document).ready(function(){ // The video_length_round variable is video specific. // In this example the video is 10.88 seconds long, rounded up to 11. var video_length_round = 11; var video = document.getElementById('home_video_element'); var mp4Source = document.getElementById('mp4Source'); // Ensure home_video_element present on page if(typeof video !== 'undefined'){ // Ensure video element has an mp4Source, if so then update video src if(typeof mp4Source !== 'undefined'){ $(mp4Source).attr('src', '/assets/homepage_video.mp4'); } video.load(); // Ensure video is fully buffered before playing video.addEventListener("canplay", function() { this.removeEventListener("canplay", arguments.callee, false); if(Math.round(video.buffered.end(0)) >= video_length_round){ // Video is already loaded this.play(); } else { // Monitor video buffer progress before playing video.addEventListener("progress", function() { if(Math.round(video.buffered.end(0)) == video_length_round){ this.removeEventListener("progress", arguments.callee, false); video.play(); } }, false); } }, false); } }); 

Sopra javascript aggiorna la fonte di un elemento video come questo: