Video vollständig in Chrome puffern

Question

Ist es möglich, HTML5-Video in Chrome (und Opera) vollständig zu puffern?

Ich hostet den Film in. MP4 und .Webm auf Amazon S3. In HTML verwende ich StandardTag. Der Server antwortet mit dem Status 206 Partial Content. Es ist großartig, da es dem Browser erlaubt, jeden Teil des Videos herunterzuladen, aber ich muss sofort in der Lage sein, jeden Teil der Datei zu suchen.

Ich habe versucht:

1. .PROGRESS Ereignis. Wenn Chrome den ersten Teil nicht mehr puffert, wird die Verbindung abgebrochen. Die nächsten Teile werden in einer neuen Verbindung heruntergeladen, sodass JavaScript die heruntergeladenen Gesamtdaten nicht überprüfen kann. Selbst wenn dies möglich ist, werden die alten Daten nicht im Cache gespeichert. Diese Methode funktioniert in Firefox und Safari. Verdammt, auch in IE10!
2. XHRS. Ich kann den Film vollständig herunterladen, aber wenn das Video abgespielt wird, versucht Chrome, den Film erneut vom Server herunterzuladen. Ich habe sogar versucht, den Film in base64 in HTML zu überführen, aber das sind zu viele Daten
3. FileAPI. Chrome kann BLOB nicht groß genug erstellen und stürzt ab.

Jede Hilfe ist willkommen!

ps. Ich bin mir der od und ähnlichen Fragen bewusst, aber ich hoffe, dass sich etwas geändert hat, seit sie gefragt wurden.

Answer 1

Da S3 partielle Downloads unterstützt, puffert Chrome zunächst "nur das, was benötigt wird" vor dem Abspielkopf und stoppt dann die Pufferung. Es wird weiter gepuffert "nur was gebraucht wird" wenn das Video abgespielt wird. Dies bedeutet, dass es, abhängig von der Download-Geschwindigkeit des Benutzers, ab und zu aufhört zu puffern, nur weil es genügend Puffer hat, um kontinuierlich zu spielen.

Aber wenn Sie das Video anhalten, nachdem einige, Chrome nicht Stop Pufferung und gehen durch den ganzen Weg bis zum Ende gespielt zu haben.

Dieses Beispiel nutzt diese Technik, um das Video vollständig vom Bildschirm zu trennen, bevor es auf der Seite angezeigt wird.

auf Chrome Geprüft 32

// Create video in background and start playing 
var video = document.createElement('video'); 
video.src = 'video.mp4'; 
video.controls = true; 
video.muted = true; 
video.play(); 

// Pause immediately after it starts playing. 
video.addEventListener("timeupdate", function() { 
    if (this.currentTime > 0) { 

     this.pause(); 
     video.muted = false; 
     video.currentTime = 0 
     this.removeEventListener("timeupdate", arguments.callee, false); 

     // When whole video is buffered, show video on page 
     video.addEventListener("progress", function() { 
      if (Math.round(video.buffered.end(0))/Math.round(video.seekable.end(0)) == 1) { 
       document.body.appendChild(video); 
       this.removeEventListener("progress", arguments.callee, false); 
      } 
     }, false); 
    } 
}, false); 

Answer 2

ich es nicht versucht, aber das Videoobjekt HTML5 enthält eine gepufferte Eigenschaft

var video = document.createElement('video'); 
video.buffered.start(0); 
video.buffered.end(0); 

Sie könnten versuchen, die gepufferte (wie mit diesem Thread Überwachung chrome html5 video buffered.end event)

Dann ändern Sie kontinuierlich die aktuelle Zeit direkt vor der gepufferten Zeit mit

video.currentTime = video.buffered.end(0) - 1; 

Answer 3

Es gibt mehrere Möglichkeiten, ein Video den ganzen Weg dann spielen zu laden:
1. Es ist der Goody Goody Browser-Entwickler stolz Weise sein würde:

var video = document.createElement('video'); 
video.src='myvideo.mp4'; 
document.appendChild(video); 
video.load(); 
video.addEventListener('loadedmeta',function(){ 
video.play() 
}); 

2. Und es gibt die faul "Aber ich werde Karpetunnel bekommen!"Entwickler Weg:

<video src='myvideo.mp4' onloadedmeta='this.play()' preload></video> 

Quellen:
http://www.w3schools.com/tags/tag_video.asp
how to run js code when video is fully buffered/loaded
How do I add new Video entirely from JavaScript?
javascript with html <video> load() & play() function not firing http://www.w3.org/wiki/HTML/Elements/video

Answer 4

Haben Sie versucht, die canplaythrough Ereignis

Nicht im herkömmlichen Sinne, ich bedeuten. Eher "hacky". canplaythrough wird ausgelöst, wenn der Browser erkennt, dass genügend Video gepuffert ist, um kontinuierlich ohne Pause zu spielen. Ich vermute, dass dieses Ereignis ungefähr zur selben Zeit ausgelöst wird wie das Pausieren von Chrom. Wenn dies der Fall ist, könnte es verwendet werden, um eine Anforderung für den Rest des Videos auszulösen.

Answer 5

Vorsicht video.buffered.end mit (0). Nach meiner Erfahrung funktioniert es mit Chrome, aber es schlägt mit IE9 fehl.

Ich weiß nicht, was passiert, IE9 scheint zu vergessen, die letzte Aktualisierung von video.buffered.end() am Ende des Pufferungsprozesses und der video.buffered.end (0) ist ein wenig zu tun kleiner als video.duration.

Also, wenn Sie denken, dass Ihre Seite mit einem anderen Browser als Chrome verwendet werden könnte, nicht video.buffered.end nutzen (0).