Javascriptビデオblobとプログレッシブダウンロード

Question

クラシック<video src="http://myserver/video.mp4">を使用してビデオストリーミングWebアプリケーションをURL ブロブに切り替えようとすると、ページ上の単純なCtrl + sでの完全ダウンロードを避けることができます。

XMLHttpRequestを使用すると、離れたビデオファイルからブロブを作成することができます。

問題は、XMLHttpRequestは、プログレッシブダウンロードには使用できないファイル全体をダウンロードしています。

次のコードは、離れたファイルからブロブをロードする最も簡単な例です。

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(); 

アプリケーションは、ビデオストリームのためにあるので（私たちは、ユーザがすべてでストリーミングされていないファイル全体をダウンロードするためにX分を待ちたくない場合）、このメソッドは使用できません。

BLOBとプログレッシブダウンロードを組み合わせる方法はありますか？

Answer 1

src = "foo.mp4"メソッドだけを使用する場合は、プログレッシブダウンロードがブラウザのデフォルト動作である必要があります。ただし、再生の経験はファイルの実際の形式に依存します。

「通常の」MP4ファイルはストリーミング用に設計されていません。これらは、再生を開始するために必要なデータがファイルの開始と終了の間で分割されるように構成されています。したがって、プレイヤーは、再生を開始するために必要なデータを得るためにすべてをバッファリングする必要があります。

「-frag」オプションを指定して、のようなツールを使用して、通常のMP4を断片化したMP4に変換してみることができます。これにより、ファイル内のデータが並べ替えられ、すべての初期化データが前面に表示され、残りのファイルが塊に分割されます。

さらに複雑なオプションは、MPEG-DASHのようなものを使用することです。 MP4Boxとdash.jsを活用することで、完全なアダプティブストリーミングメディアプレーヤーをセットアップできます。