開発者ツールで見つける:Webページに隠れたM3U8 URLの探し方

目次

  1. 動画を動かしてから覗く
  2. Networkパネルの絞り込み方
  3. コンソールでURLを一覧化する
  4. 取れたURLがマスターかメディアか
  5. m3u8でヒットしないときの代替ワード

動画を動かしてから覗く

多くのサイトは動画を再生した瞬間にだけストリームを読み込みます。つまり開発者ツールを開く順番が重要で、「ページを開く → F12でNetworkパネルを表示 → 動画を再生」の順に進めないと、肝心のリクエストがログに現れません。ページ遷移でログが消えて困る場合は、パネル上部のPreserve logにチェックを入れておくと記録が保持されます。

Networkパネルの絞り込み方

ログが溜まったら、フィルターボックスにm3u8と入力します。一覧が減らないときは、タイプ列のx-mpegURLやvnd.apple.mpegURL(HLSのMIMEタイプ)で絞るのも有効です。目的のリクエストが見つかったら右クリックからCopy → Copy link addressでURLだけを取り出せます。

見つけたURLが正しいかどうかは、実際に貼って再生すれば確実です。オンラインプレーヤーにそのままペーストして、映像が立ち上がれば完成です。

コンソールでURLを一覧化する

リクエストが多すぎて目視が大変なときは、Consoleタブから読み込まれたリソースを一気に出せます。

performance.getEntriesByType('resource')
  .filter(r => r.name.includes('.m3u8'))
  .map(r => r.name)

このスニペットはページが読み込んだ全リソースからm3u8を含むURLだけを配列で返します。セグメント(.ts)のURLを拾いたい場合は'.ts'に変えるだけです。動的に差し替わるライブ配信のリストを観察するときにも便利で、実行のたびに現在のプレイリストURLが確認できます。

取れたURLがマスターかメディアか

1本取れたから終わり、ではありません。URLの中身を開いてEXT-X-STREAM-INFが並んでいればそれはマスタープレイリストで、実ファイルはさらに先の各画質のm3u8にあります。逆にEXTINFと.tsが並んでいればメディアプレイリストです。変換やダウンロードに使う場合はマスターを渡すのが安全で、ツール側が最適な画質を選んでくれます。URLのクエリに有効期限やトークンが付いているソースも多く、その場合は取得後すぐに使わないと失効する点にも注意してください。

m3u8でヒットしないときの代替ワード

フィルタで何も出ないケースでは、次の順に試してみてください。

見つけたURLの扱いに迷ったら、チュートリアルのほかの記事も参照してください。用途に応じた次の一手がまとまっています。