Title: ビデオプレーヤーを壊さずにキャスト機能を追加する方法
ブラウザからテレビへのビデオのキャストは簡単そうに見えますが、多くのカスタムHTML5プレーヤーは、いざ試してみると動作しなくなります。最近の開発者向けガイドでは、トークンの期限切れ、CORSブロック、到達不能なホスト、MSE-blobの罠という4つの隠れた失敗要因を挙げ、それぞれをどのように回避すべきかを具体的に示しています。
なぜキャストでカスタムプレーヤーが躓くのか
キャストをクリックしても、テレビ上であなたのJavaScriptプレーヤーが動作するわけではありません。テレビは渡されたストリームURLを取得し、自身のファームウェアでメディアを再生します。オーバーレイ、アナリティクスの通信、アダプティブビットレートのロジックなどはブラウザ側に残ったままになります。もしテレビが同じ条件下で同じURLを取得できない場合、再生は停止します。その際、コンソールに明らかなエラーが表示されないことも少なくありません。
よくある4つの原因
- トークンの期限切れ – ブラウザでは有効期限の短いセキュリティトークンでも問題ありませんが、テレビはストリームを90分間保持し続けることがあります。トークンが切れると、ビデオは停止します。キャストセッションには、より有効期限の長いトークンを発行してください。
- CORSエラー – CORSは、どのドメインがリソースをリクエストできるかを決定します。テレビは別のオリジンとして扱われるため、ビデオサーバーがページのドメインのみをホワイトリストに登録している場合、ブラウザでは同じURLが動作していても、テレビからのリクエストはブロックされます。
- 到達不能なホスト – 開発環境では、
localhost、内部ホスト名、またはプライベートIP範囲がよく使われます。テレビは異なるネットワークセグメントにあるため、それらのアドレスを解決したりルートを辿ったりすることができず、サイレントな失敗につながります。 - MSEの罠 – Media Source Extensions (MSE) を使用すると、ブラウザはチャンクをその場で繋ぎ合わせることができ、その結果、ビデオが
blob:URLとして公開されることがよくあります。hls.jsのようなライブラリは、アダプティブストリーミングのためにこのようなblobを生成します。テレビはblobを取得することはできません。テレビが必要とするのは、実際のマニフェスト（例：.m3u8または.mpd）のURLです。キャストダイアログを呼び出す前に、ソースを実際のマニフェストURLに切り替えてください。
ステップバイステップのチェックリスト
- キャストのサポート状況を検出する – Chromeの場合は Remote Playback API を、Safariの場合は WebKit イベントを使用します。これにより、ブラウザが再生を委譲できるかどうかを判断できます。
- 接続状態を監視する – ボタンをクリックしたからといって、安定したリンクが保証されるとは限りません。Remote Playback オブジェクトの
connecting、connected、disconnectイベントを購読してください。テレビを真実のソースとして扱い、connectedイベントを受け取った後にのみUIを更新するようにします。 - 有効期限の長い直接URLに切り替える –
remotePlayback.prompt()を呼び出す前に、ビデオ要素のsrcをテレビが取得可能なマニフェストURLに置き換えます。ローカル再生用には元のblobベースのソースを保持し、キャストセッションの時だけ切り替えるようにします。 - 最小構成のテストで検証する – JavaScriptを使用せず、マニフェストURLを指す単一の
<video>タグのみを持つシンプルなHTMLページを作成し、1時間ほど再生させてみます。もしビデオが停止するなら、その基盤となるストリームはテレビ上でも失敗します。キャストボタンを追加する前に、トークンの有効期限、CORSヘッダー、またはホストのアクセシビリティを修正してください。
開発者が得られるメリット
プレーヤーの他の機能を壊すことなく、信頼性の高いキャストボタンを追加できます。
まとめ
カスタムビデオプレーヤーにとって、キャストは「つなぐだけ」で使える機能ではありません。再生環境を全く別の環境へと委譲することになるからです。有効期限の長い、CORS承認済みのURLを用意し、blob参照を避け、テレビの接続イベントを監視することで、プレーヤー全体を壊すことなく、確実に動作するキャストボタンを追加することができます。