Kreuz-Browser Video Vorbelastung

Question

fand ich einen Weg, um ein Video teilweise bis 20% vor Spiel vorzuladen, die auf Firefox ruhig gut zu funktionieren scheint:

  window.addEventListener("load", function() { 

      var video = document.createElement("video"); 
      video.setAttribute("preload", "auto"); 
      video.setAttribute("controls", "true"); 
      var mp4 = document.createElement("source"); 
      mp4.setAttribute("src", "https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"); 
      mp4.setAttribute("type", "video/mp4"); 
      var webm = document.createElement("source"); 
      webm.setAttribute("src", "https://archive.org/download/ElephantsDream/ed_1024.ogv"); 
      webm.setAttribute("type", "video/ogv"); 
      video.appendChild(mp4); 
      video.appendChild(webm); 
      document.body.appendChild(video); 

      var v = document.querySelector("video"); 
      v.addEventListener("progress", function() { 
       (function() { 
        if(v.readyState == 4) { 
         var buffer = v.buffered; 
         var loaded = (buffer.end(0)/v.duration) * 100; 
         console.log(loaded); 
         if (buffer.length === 1) { 
          if (loaded >= 20) { 
           console.log("Vidéo chargée"); 
           v.play();        } 
          } 
         } 
       })(); 
      }); 
     }); 

Unhappily, auf Chrome, muss das Video abgespielt werden gepuffert.

Gibt es einen Cross-Browser-Code zum Vorladen eines Videos?

Answer 1

Das Video wird immer vorzuladen, wenn Sie setzen

video.setAttribute("preload", "none"); 

Die Unterschiede zwischen den Browsern der Implementierung abhängt. Nach der spec innerhalb Ressourcen Algorithmus

Benutzerprogramme, beispielsweise kann holen sich entscheiden, nicht mehr Inhalte jederzeit herunterladen nach dem Puffern von fünf Minuten einer einstündigen Medienressource, während auf den Benutzer gewartet wird, um zu entscheiden, ob die Ressource abgespielt werden soll oder nicht, oder während auf eine Benutzereingabe in einer interaktiven Ressource gewartet wird.

So ist leider kein enterely unter Ihrer Kontrolle, da Sie preload = auto gesetzt. Wenn Sie Cross-Browser-I mit der Eigenschaft spielen würde

video.setAttribute("autoplay", "true|false") 
video.setAttribute("preload", "metadata|auto") 

Ein wenig Informationen über preloading on html5.

- update ---

poste ich hier die endgültige Lösung für Chrome durch den Eigentümer der Frage sofern er über Pastebin zur Verfügung gestellt. Ein großes Lob an jadw

window.addEventListener("load", function() { 
    var video = document.createElement("video"); 
     video.setAttribute("preload", "auto"); 
     video.setAttribute("controls", "true"); 
     video.setAttribute("webkit-playsinline", "true"); 
     video.setAttribute("playsinline", "true"); 
     video.setAttribute("autoplay", "true"); 
     var mp4 = document.createElement("source"); 
     mp4.setAttribute("src", 
     "https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4"); 
     mp4.setAttribute("type", "video/mp4"); 
     video.appendChild(mp4); 
     video.onloadstart = function() { 
      video.volume = 0; 
      video.addEventListener("progress", progressLoad); 
      video.pause(); 
     }; 
     var progressLoad = function(){ 
      console.log(video.readyState); 
      (function() { 
      if (video.readyState === 4) { 
       var buffer = video.buffered;       
       var loaded = (buffer.end(0)/video.duration) * 100; 
       console.log(loaded); 
       video.currentTime = loaded; 
       if ((buffer.length === 2) || (loaded >= 20)) { 
       video.currentTime = 0; 
       video.removeEventListener("progress", progressLoad); 
       console.log("Video loaded"); 
       document.body.appendChild(video); 
       video.play(); 
       } 
      } 
     })(); 
    }; 
});