Javascript Video Blob und progressiven Download

Question

Versuchen, meine Video-Streaming-Web-Anwendung von klassischen <video src="http://myserver/video.mp4"> mit URL zu Blobs zu wechseln, um einen vollständigen Download auf einer einfachen Strg + s auf der Seite zu vermeiden.

Die Verwendung von XMLHttpRequest scheint obligatorisch zu sein, um das Erstellen des Blobs aus der entfernten Videodatei zu ermöglichen.

Problem ist XMLHttpRequest downloaden Sie die ganze Datei, die nicht für den progressiven Download verwendet werden kann.

Der folgende Code ist das einfachste Beispiel zum Laden eines Blobs aus einer entfernten Datei.

var r = new XMLHttpRequest(); 
r.onload = function() // Triggered only when all video is downloaded 
{ 
    video.prop("src", URL.createObjectURL(r.response)); 
}; 

r.open("GET", "http://myserver/video.mp4"); 
r.responseType = "blob"; 
r.send(); 

Da die Anwendung für Video-Stream ist, ist dieses Verfahren nicht verwendet werden (es sei denn, wir der Benutzer warten, X Minuten wollen die gesamte Datei herunterzuladen, die überhaupt nicht streamt).

Gibt es eine Möglichkeit, Blob mit progressivem Download zu kombinieren?

Answer 1

Wenn Sie nur die Methode src = "foo.mp4" verwenden, sollte der progressive Download das Standardverhalten im Browser sein. Die Wiedergabe hängt jedoch vom tatsächlichen Format der Datei ab.

"Normale" MP4-Dateien sind nicht für Streaming ausgelegt. Sie sind so strukturiert, dass die zum Starten der Wiedergabe benötigten Daten zwischen dem Anfang und dem Ende der Datei aufgeteilt werden können. Ein Spieler muss daher die ganze Sache puffern, um die Daten zu erhalten, die er zum Spielen braucht.

Sie könnten versuchen, die normale MP4 zu einem fragmentierten MP4 mit einem Werkzeug wie , die Angabe der "-frag" -Option. Dies ordnet die Daten in der Datei so an, dass alle Initialisierungsdaten an der Vorderseite stehen und der Rest der Datei in Blöcke aufgeteilt ist.

Eine komplexere Option ist es, etwas wie MPEG-DASH zu verwenden. Durch die Nutzung von MP4Box und dash.js können Sie einen vollwertigen adaptiven Streaming Media Player einrichten.