YouTube のビデオを見ていましたが、そのビデオ プレーヤーの一部を調査することにしました。私が見たほとんどの HTML5 ビデオとは異なり、Youtube のビデオ プレーヤーは通常のビデオ ソースを使用せず、代わりにブロブ URL をソースとして使用していることに気付きました。
以前に HTML5 ビデオをテストしたところ、サーバーが最初からビデオ全体のストリーミングを開始し、残りのビデオ全体をバックグラウンドでバッファリングすることがわかりました。これは、ビデオが 300 MB の場合、300 MB すべてがダウンロードされることを意味します。途中までシークすると、シーク位置から最後までダウンロードを開始します。
Youtube はこのようには機能しません (少なくとも chrome では)。代わりに、一時停止中に一定量だけバッファリングするようにバッファリングを制御します。また、関連する部分のみをバッファリングするように見えるため、スキップすると、視聴される可能性が低い部分をバッファリングしないようになります.
これがどのように機能するかを調査しようとしたときに、ビデオの src タグの値が であることに気付きました。これは、blobsblob:http%3A//www.youtube.com/ee625eee-2802-49b2-a13f-eb374d551d54を指し示し、その後、 typed arraysにつながりました。これら 2 つのリソースを使用して、mp4 ビデオを BLOB にロードし、HTML5 ビデオ タグで表示できます。
しかし、私が今立ち往生しているのは、Youtubeが作品をどのように扱っているかです. ネットワーク トラフィックを見ると、http://r6---sn-p5q7ynee.c.youtube.com/videoplayback1.1 MB のチャンクでバイナリ ビデオ データを返す要求が送信されているように見えます。また、HTML5 ビデオ リクエストによる通常のリクエストのほとんどは、ストリーミング中に 206 レスポンス コードを受け取っているように見えますが、YouTube の playvideo 呼び出しでは 200 が返されることにも注意してください。
残念ながら失敗Rangeした（ビデオに付属するビデオのメタデータがなかったためだと思います）。
この時点で、私は Youtube がこれをどのように達成しているかを突き止めようとしています。私はいくつかのアイデアを思いつきましたが、どれも完全に売り切れていません:
1) Youtube は、呼び出しごとに自己完結型のビデオとオーディオのチャンクを送信してい/videoplaybackます。これはアップロードする側にとってかなりの負担になりそうで、これらをつなぎ合わせて1本のシームレスな動画に見せるのは難しそうです。$('video').durationまた、 video タグは、との呼び出しから判断して、それが 1 つの完全なビデオで$('video').currentTimeあると考えているようです。これは、ビデオ タグが単一のビデオ ファイルであると考えていると私に信じさせます。最後に、vidoe src タグは変更されないため、単一のブロブで動作し、ブロブを切り替えていないと思われます。
2) Youtube は、完全なビデオ配列に事前にサイズ設定された空の BLOB を構築し、ダウンロードするときに BLOB を断片で更新します。次に、ユーザーが最後にダウンロードされた部分に近づきすぎていないことを確認します (ユーザーが blob のダウンロードされていないセクションに入るのを防ぐため)。これで私が目にする問題は、JavaScriptを介してブロブを動的に更新する方法が見当たらないことです（ただし、グーグルで検索するのに問題があるだけかもしれません）
3) Youtube はメタ データをダウンロードし、ダウンロード時にビデオ ピースを追加することで、BLOB の構築を順番に開始します。この方法で私が目にする問題は、バッファリング後の領域でのシークをどのように処理するのか理解できないことです。
たぶん、目の前にある明白な答えを見逃しているだけかもしれません.誰かアイデアがありますか?
編集：4番目のオプションを考えました。もう 1 つのアイデアは、ファイル API を使用してバイナリ チャンクをファイルに書き込み、そのファイルを使用してストリーミングすることです。ファイル API には特定の位置をシークする機能があるようです。そのため、動画を空のバイトで埋めて、受信したときに埋めていくことができます。これは間違いなくビデオの検索にも対応します。