YouTubeと言えば今では知らない人がいないネットの動画投稿サイトです。

多くの芸能人も動画をアップロードしていたりと世界中の動画が集まっています。

いろんな動画が見れるなんてネットって便利だなーと思うと同時に、いったいどういう仕組みで動画が見れるのかなーと時々ふと思う人も多いと思います。

そこでここでは簡単にその仕組みをまとめてみました。


プログレッシブダウンロード

YouTubeでは動画が見れます。
これは動画のデータがパソコンに少しずつダウンロードされて溜まりながら動画が再生されているのです。
この方法をプログレッシブダウンロードと言います。
ダウンロードされたデータは一時的にキャッシュとしてパソコンの中に保存され、そのうち消えます。
動画の何分何秒から見るのをスライドさせて調整するあれ、すなわちシークバーに何か灰色に伸びて溜まっていくやつがありますよね。

あれが先にダウンロードされているデータです。

似たものにストリーミングがありますが、あれはダウンロードされたデータがすぐ消えてしまうようです。

実際に見てみる

YouTubeでは動画が少しずつ先にダウンロードされていることはわかったけれど、実際どんな感じなのか知りたいですよね。
そこでchromeを用いて中身を見る方法を説明します。

まずYouTubeの動画を開きます。
そこで右クリックし、下の方にある検証をクリックします。
検証をクリックすると、なんか画面が出てきますよね。
その中の上の方のNetworkをクリックします。
その状態で動画を再生してみてください。
するとNameの下にどんどんファイルが増えていくのが確認できます。
これが動画に関係するファイルたちです。
動画を再生し続けるためにファイルが少しずつダウンロードされているのです。
どれがどれかさっぱりわからないですよね。
まあ動画だし、videoとか名前がついてる「videoplayback?~」というファイルが動画っぽいですよね。
試しに右クリックして新しいタブで開いてみましょう。
するとどうでしょう。
何か動画っぽいのが表示されました。

でもなんか再生できません。
この開いてみたファイルはxhrファイルと言って、JavaScriptを用いてサーバーと何らかのデータのやり取りをするものです。
ということは、このファイルの中身を見れば何かわかるかもしれません。
先ほどと同じように検証を開き、今度はElementを見てみましょう。
▶や…で省略されているのでクリックして展開してみましょう。
<source src=~のところをダブルクリックすると長いURLが書いてあることがわかります。
長すぎて意味が分かりませんよね。
よくわからないけどとりあえずパラメータを見てみましょう。

?expire=
&ei=
&ip=
&id=
&itag=
&aitags=
&source=
&requiressl=
&mh=
&mm=
&mn=
&ms=
&mv=
&mvi=
&pl=
&initcwndbps=
&vprv=
&mime=video%2Fwebm
&ns=
&gir=
&clen=
&dur=
&lmt=
&mt=
&fvip=
&keepalive=
&fexp=
&c=
&txp=
&n=
&sparams=
&sig=
&lsparams=
&lsig=
&alr=
&cpn=
&cver=
&range=19520570-21198113
&rn=
&rbuf=

多すぎる！
そして意味が分からない。
とりあえずわかりそうなことはvideoと書いてあることから動画ファイルであることでしょうか。
これは<source src=の最後の部分の type="video/webm">からもわかります。
ちなみに選択したファイルによってはaudioと書いてあり、音声ファイルの場合もあります。
動画ファイルと音声ファイルが別々に存在してるっぽいです。

動画ファイルとわかっても再生がなぜかできません。
しかし、テキトーにいじっていると再生されるパラメータがありました！
それがrangeです。
これをてきとーに0-99999999999とかにすると再生できました。
ブラウザの上にあるURLの部分のrangeを変更すると再生されました。

まとめ

こんな感じでYouTubeでは動画が少しずつパソコンにダウンロードされるというプログレッシブダウンロードという方法を用いており、それはChromeの検証から実際に確認することができることがわかりました。
type=video/webmと書かれているように、YouTubeでは.webmの拡張子が使われています。
音声の場合には.webaという拡張子、画像や動画の場合には.webpという拡張子も使われているそうです。
やっぱりYouTubeは様々なパラメータがあるように仕組みは複雑ですが、webmというフォーマットを用いることで効率化・高速化を図っているように感じました。

参考

https://rooter.jp/web-crawling/youtube-dl-format/
https://doupa.jp/info/1203/