ブラウザ動画再生技術

HTML5 Video要素

HTML5はvideo要素を導入し、プラグインなしでブラウザでの動画再生を可能にしました。video要素はネイティブの動画再生機能を提供し、MP4、WebM、OGGなどの複数フォーマットをサポートしています。JavaScript APIを通じて、開発者は再生、一時停止、シーク、音量を完全に制御できます。

基本的な使い方は非常にシンプルです：HTMLにvideoタグを追加し、src属性で動画ファイルを指定し、controls属性で再生コントロールを表示します。autoplay、loop、mutedなどの属性で再生動作を制御することもできます。

Media Source Extensions

Media Source Extensions（MSE）は、JavaScriptが動的にメディアデータをvideo要素に提供できるW3C標準です。MSEはアダプティブビットレート再生の鍵となる技術で、HLS.jsやDash.jsなどのライブラリはMSEに基づいて実装されています。

MSEの仕組み：JavaScriptでMediaSourceオブジェクトを作成し、SourceBufferを作成し、動画データ（通常fMP4形式）をSourceBufferに追加します。ブラウザは自動的にSourceBufferからデータを読み込んでデコードと再生を行います。

Encrypted Media Extensions

Encrypted Media Extensions（EME）は、ブラウザで暗号化された動画コンテンツを再生するためのW3C標準です。EMEはWidevine、FairPlay、PlayReadyなどのDRMシステムと連携するAPIを提供し、保護されたコンテンツをブラウザで安全に再生できます。

WebCodecs API

WebCodecs APIは、ブラウザ内蔵コーデックへの低レベルアクセスを提供する新しいW3C標準です。MSEとは異なり、WebCodecsは特定のコンテナフォーマットに依存せずに、動画のエンコードとデコードプロセスを直接制御できます。

主な適用シナリオ：リアルタイム動画処理とフィルター、動画録画とスクリーンショット、低遅延動画ストリーミング、カスタム動画プレーヤーなど。

フルスクリーンとピクチャインピクチャ

モダンブラウザは動画再生体験を向上させるため、フルスクリーンAPIとピクチャインピクチャAPIを提供しています。フルスクリーンAPIは動画要素を画面全体に表示し、没入型の視聴体験を提供します。ピクチャインピクチャAPIは動画を小さなフローティングウィンドウで表示し、ユーザーが他のアプリを使用しながらも動画の視聴を継続できます。