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.Altro: Forza Chrome per bufferizzare completamente il video mp4

Ho un video mp4 100MB che ha bisogno di essere completamente scaricato dal browser,

theres Tuttavia nessun evento che viene generato quando il suo stato completamente scaricato, e Chrome sembra fermarsi il buffering più del video fino il tempo video corrente ha quasi raggiunto la fine del buffer, quindi richiede di più.

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

Grazie

fonte

2013-08-15 Owen

Purtroppo Chrome - come altri browser HTML5 - cerca di essere intelligente su che cosa sta scaricando ed evita l'utilizzo della larghezza di banda inutile ... questo significa che a volte siamo lasciati con un'esperienza di sub-ottimale (ironicamente YouTube ne soffre così tanto che ci sono estensioni per 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 avete bisogno di qualcosa il l'unica soluzione che ho trovato è un po 'un martello ... usa Ajax per scaricare il file che vuoi riprodurre e poi caricarlo nella sorgente per l'elemento video.

L'esempio seguente presuppone che il 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 della dimensione desiderata (ne ho provati alcuni abbastanza grandi ma non sono sicuro di quale limite superiore 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 dimensione probabilmente vorrai mostrare una barra di progresso solo per tenerli interessati ...

l'altro Il lato negativo 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 buffer, dovrai iniziare a scavare nel bordo sanguinante (al moment) world of MediaSource come descritto in post come http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/

<!DOCTYPE html> 
<html> 
<head> 
<title>Preload video via AJAX</title> 
</head> 
<body> 
<script> 
console.log("Downloading video...hellip;Please wait...") 
var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'BigBuck.m4v', true); 
xhr.responseType = 'blob'; 
xhr.onload = function(e) { 
    if (this.status == 200) { 
    console.log("got it"); 
    var myBlob = this.response; 
    var vid = (window.webkitURL || window.URL).createObjectURL(myBlob); 
    // myBlob is now the blob that the object URL pointed to. 
    var video = document.getElementById("video"); 
    console.log("Loading video into element"); 
    video.src = vid; 
    // not needed if autoplay is set for the video element 
    // video.play() 
    } 
    } 

xhr.send(); 
</script> 

<video id="video" controls autoplay></video> 

</body> 
</html>

fonte

2013-08-18 00:49:55 Offbeatmammal

mia soluzione è per un video molto più piccolo del PO descritto, tuttavia il comportamento desiderato è la stessa: Impedire il video dall'inizio riproduzione finché il video è completamente tamponata. Il video dovrebbe essere riprodotto per gli utenti di ritorno se il video è già in cache.

La risposta in basso è stata fortemente influenzata da questo answer ed è stata testata su Chrome, Safari e Firefox. file di

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:

<video id="home_video_element" loop="" poster="/assets/home/video_poster_name.jpg" preload="auto"> 
     <source id="mp4Source" type="video/mp4"> 
    </video>

fonte

2015-07-11 13:50:39 AlexanderRD

Altro: Forza Chrome per bufferizzare completamente il video mp4

risposta

Problemi correlati