HTML5メディアソース拡張機能：プロダクションビデオをWebに提供

過去10年間で、FlashやSilverlightなどのプラグインにより、ブラウザーでのビデオの豊富な消費が可能になり、YouTubeやNetflixなどの人気のあるサービスが強化されました。 ただし、このアプローチは過去数年間でHTML5に移行しています。

ほぼ2年前、W3CはHTML5仕様の最終勧告を公開しました。これには、特にビデオ用の新しいHTML要素とAPIのセットが付属しています。 それらのいくつかは、Webページでより多くのセマンティクスを目指していますが、新しい機能を導入していません。 また、Adobe Flash、Microsoft Silverlight、Javaなどのプラグインを必要とせずに、Webの可能性を広げ、開発者の可能性を高めるものもあります。

SmashingMagの詳細：

• Webテクノロジーでネイティブエクスペリエンスを提供する
• HTML5詳細要素の完全なポリフィルの作成
• プログレッシブウェブアプリの初心者向けガイド
• HTML5ロゴ：どう思いますか？

これは特に重要です。たとえば、GoogleはFirefoxと同様にNPAPI（これらのプラグインで使用されるAPI）の削除を発表し、Microsoftはプラグインなしのブラウジングを提唱しています。 これらのベンダーはまだFlashプレーヤーを提供していますが、提供しないのはおそらく時間の問題です。 さらに、モバイルデバイスのブラウザは、ほとんどがプラグインをサポートしておらず、Flashプレーヤーを備えていないため、一歩先を進んでいます。

新しいHTML5要素のいくつかと、それらがビデオ用に改善する点を見てみましょう。

• <canvas>は、グラフやゲームグラフィックスなどをレンダリングするためのスクリプトを提供します。 これは、Canvas JavaScriptAPIと呼ばれることもあります。 canvas要素をWebGLで使用して、グラフィックカードのGPUを使用して2Dおよび3Dグラフィックをレンダリングすることもできます。
• <video>は、すぐに使用できるビデオの再生を可能にします。これは本当に素晴らしいことです。 これにより、最終的にWeb上のプラグインフリーのマルチメディアが現実のものになります。 実際、ブラウザベンダーは、Opera Miniを除いて、最新のブラウザで広くサポートされているMPEG-4 /H.264という単一の形式に同意しているようです。
• <audio>を使用すると、Webページ上のオーディオコンテンツをすぐに再生できます。 ビデオと同様に、サポートするコンテナ形式とコーデックの決定はブラウザベンダーに任されています。
• <track>は、ビデオの字幕やキャプションなど、時間制限のあるテキストトラックに使用できます。 WebVTTファイルはそのままでサポートされます。

新しい要素のほとんどは、最新のすべてのブラウザーに実装されているため、HTML5ビデオプレーヤーコードでしばらくの間知られ、使用されてきました。 仕様は安定しています。 それでも、W3Cにはやるべきことがたくさん残っています。

私にとって、W3Cが取り組んでいる最も重要な標準は、「Media Source Extensions」（MSE）標準であり、現在、「CandidateRecommendation」のステータスになっています。 このJavaScriptAPIを使用すると、 <video> 、 <audio> 、およびその他の要素のメディアストリームを生成でき、純粋なHTML5およびJavaScriptでのMPEG-DASHなどの適応型ストリーミング標準が可能になります。

もう1つの興味深いものは、HTML5およびJavaScriptで保護されたコンテンツの再生を可能にする「EncryptedMediaExtensions」標準です。 ただし、これは現在「草案」であり、完成までにしばらく時間がかかります。

新しい標準を歓迎し、Flashプレーヤーやプラグインが不要になり、単一の実装でほぼすべてのデバイスでマルチメディアを表示できるようになることを楽しみにしています。

なぜMPEG-DASH？

MPEG-DASHストリーミング形式と、それがHTML5で使用される理由を見てみましょう。 MPEG-DASH（DASHはHTTPを介したダイナミックアダプティブストリーミングの略）は、MPEGおよびISO（ISO / IEC 23009-1）によって承認されたベンダーに依存しない国際標準です。 Apple HLS、Microsoft Smooth Streaming、Adobe HDSなどの以前のアダプティブストリーミングテクノロジーは、ベンダーに依存しないストリーミングサーバーまたは再生クライアントのサポートが制限されているベンダーによってリリースされました。 ベンダーに依存する状況は明らかに望ましくなかったため、標準化団体は調和プロセスを開始し、2012年にMPEG-DASHが承認されました。

簡単に言うと、MPEG-DASHの目標と利点は次のとおりです。

• ビデオ再生中の起動遅延とバッファリングおよびストールを減らします。
• クライアントの帯域幅の状況に適応し続けます。
• クライアントベースのストリーミングロジックを使用して、最高のスケーラビリティと柔軟性を実現します。
• 既存の費用効果の高いHTTPベースのCDN、プロキシ、およびキャッシュを使用します。
• HTTPを使用して、NATとファイアウォールを効率的にバイパスします。
• 同じファイルからの複数の同時DRMスキームのシグナリング、配信、および使用を通じて、共通の暗号化を有効にします。
• 単純なスプライシングと（ターゲットを絞った）広告挿入を有効にします。
• 「トリックモード」を効率的にサポートします。
• そしてもっとたくさん！

近年、MPEG-DASHは、HTML5のvideoおよびaudioタグを介したDASH再生を可能にするHTML5 MSEや、WebブラウザでのDRM保護された再生を可能にするHTML5 Encrypted Media Extensionsなど、新しい標準化の取り組みに統合されています。 。 さらに、MPEG-DASHによるDRM保護は、MPEG-CENC（一般的な暗号化用）を使用してさまざまなシステム間で調和されています。 ハイブリッドブロードキャストブロードバンドTV（HbbTV1.5およびHbbTV2.0）との統合により、さまざまなスマートTVプラットフォームでのMPEG-DASH再生が可能になります。

また、MPEG-DASH規格の使用は、DASH業界フォーラムとそのDASH-AVC / 264推奨事項に関する業界の取り組み、およびDASH-HEVC / 265推奨事項などの将来を見据えたイニシアチブによって簡素化されています。 MPEG-DASH内のH.265 / HEVC。

今日、MPEG-DASHはますます展開されており、最近この新しい標準に切り替えられたNetflixやGoogleなどのサービスによって加速されています。 これらの2つの主要なトラフィックソースにより、MPEG-DASHはすでにインターネットトラフィック全体の50％を占めています。

MSEはどのように機能しますか？

次に、MSEの詳細と、開発者がMSEをどのように使用できるかを見てみましょう。 MSEは、JavaScriptがaudioタグとvideoタグのメディアストリームを動的に構築できるようにHTMLMediaElementを拡張する仕様です。 これらのタグは完全なファイル（つまりMP4ファイル）にしかアクセスできなかったため、これは以前は不可能でした。 このアプローチは、メディアファイルのダウンロードと再生が同時に行われ、疑似ストリーミングが可能になるため、プログレッシブストリーミングまたはプログレッシブダウンロードとも呼ばれます。

ただし、これによりシーク機能が低下し、ビデオとオーディオの品質をユーザーの帯域幅の状況に適合させることができなくなります。 audioタグとvideoタグの入力としてJavaScriptでメディアストリームを構築することにより、開発者はメディアストリームをユーザーのコンテキストに動的に適合させ、ストリーミングエクスペリエンスを向上させることができます。

前述のように、MPEG-DASHはMSEに最適なストリーミング形式です。 それでは、HTML5MSEベースのビデオプレーヤーを構築するために必要な手順を見てみましょう。

1. マニフェストファイル（MPEG-DASHではMPDと呼ばれます）をダウンロードして解析します。このファイルには、ビデオストリームの品質レベルと解像度の数、オーディオ言語とサブタイトル、メディアセグメントの名前など、ビデオストリームの詳細が記述されています。 HTTPベースのオリジンサーバーまたはCDN上のファイル。
2. クライアントデバイスで利用可能な帯域幅を見積もり、バッファレスストリーミングを実現するための適切なビデオ品質を選択し、JavaScriptでメディアセグメントをダウンロードします。
3. ダウンロードしたメディアセグメントをJavaScriptのMSEバッファに渡します。
4. 通常はハードウェアで、 videoタグを介してビデオをデコードおよびレンダリングします。

これは、NetflixやYouTubeで使用されている、HTML5ベースのアダプティブストリーミングプレーヤーの仕組みです。 すでにかなり成熟したソリューションがあり、開発者やコンテンツプロバイダーは、DASH-IFオープンソースプロジェクトdash.jsやBitdashHTML5プレーヤーなどのHTML5の適応型ビットレートストリーミングに簡単に切り替えることができます。

MPEG-DASHコンテンツの生成も簡単で、x264やMP4Boxなどのオープンソースツールや、Bitcodinなどの商用エンコーディングサービスによってサポートされています。

ただし、MSEの使用はMPEG-DASHに限定されません。 ますます多くのプロジェクト（hls.jsを含む）とプレーヤー（Bitdashを含む）が、MSEを使用してHTML5でAppleのHLS形式をサポートしています。 これを行うには、HLSメディアセグメント（MPEG2-TSコンテナ）をHTML5およびMPEG-DASHで必要なISOベースメディアファイル形式にトランス多重化します。

DRM用の暗号化メディア拡張機能

現在、DRM市場では大きな変化が起こっています。これは、ChromeとFirefoxからの主要なDRMシステムであるPlayReadyのドロップにつながったSilverlightなどのNPAPIプラグインの差し迫ったドロップによって引き起こされています。 これにより、ほぼすべてのプレミアムコンテンツプロバイダーは、テクノロジーを切り替えて将来を見据えたソリューションを見つける必要があるため、困難な状況に置かれます。

プレミアムストリーミングメディアパブリッシャーは、PCおよびAndroidデバイス上のChromeおよびFirefoxでコンテンツを保護するためにMicrosoftのPlayReadyDRMに依存することはできません。 彼らは、コンテンツ保護とストリーミングプラットフォーム戦略を再評価し、将来を見据えたソリューションを見つけて、まもなくテクノロジーを切り替える必要があります。

多くのコンテンツプロバイダーにとって、MPEG-DASHが最適なテクノロジーとして登場しています。 DASHプロジェクトは加速するペースで展開されており、WidevineDRMを備えたMSEおよびEncryptedMedia Extensions（EME）が最も実行可能な代替手段のように見えます。 また、MPEG-CENCを使用すると、保護されたコンテンツの1つのバージョンだけで個別のDRMシステムをサポートでき、EMEはMPEG-DASHベースのコンテンツのMSEに基づいています。

したがって、ChromeとAndroid用のWidevine Modular、Internet ExplorerとEdge用のMicrosoft PlayReady、Firefox用のAdobeのPrimetimeなどのさまざまなDRMシステムのこの組み合わせにより、コンテンツプロバイダーはMPEGに移行するための追加のインセンティブを得ることができます。 -ストリーミング、DRM、CDNの柔軟性を考慮した、国際標準としてのDASH。

MSEおよびEMEのブラウザサポート

HTML5と特にMSEのブラウザベンダーによる2、3年の遅い採用の後、私たちは今、それらの大多数がそれをサポートしているのを見ています。 これはEMEにも当てはまりますが、この場合、各ベンダーは異なるDRMシステムを採用し、エコシステムはもう少し差別化されています。

ただし、99％のユーザーにリーチするには、MSEをサポートしていないブラウザ、特に古いブラウザバージョンとiOS上のSafariもサポートするビデオストリーミング設定が必要です。 古いブラウザは、Flashベースのプレーヤーを使用して簡単に提供できます。Flashベースのプレーヤーは、Bitdashプレーヤーで表示されるように、MSEで使用されるのと同じMPEG-DASHコンテンツを再生できます。 iOSデバイスをサポートするには、AppleがHTML5に義務付けているHLSと呼ばれるAppleのストリーミング形式を使用する必要があります。 MSEなどのオープンスタンダードはAppleではサポートされていませんが、OSXのSafariではサポートされています。

次のマトリックスは、現在のブラウザとプラットフォームでのMSEおよびEMEサポートのステータスの概要を示しています（Bitmovin提供）。

HTML5ビデオの未来

新しいメディアコーデックが市場に押し出されており、ビデオ圧縮がさらに効率的になっています。これは、4KやUHDなどの高品質フォーマットやモバイルデバイスへのストリーミングにとって特に重要です。 最も一般的なコーデックはHEVC / h.265であり、これは数年後のデフォルトのコーデックになる可能性があります（特許の状況がそれを台無しにしない場合）。 また、ブラウザの組み込みMSEを再生に利用し、ストリーミング形式としてMPEG-DASHを使用します。これは、このオープンスタンダードの柔軟性を示しています。

ビデオプレーヤーの開発者は、SourceBufferを作成するときにコーデックの属性を変更するなど、いくつかの簡単な調整を実行する必要があります。 また、基盤となるブラウザがHEVCデコードをサポートしている場合（ほとんどの場合、ハードウェアデコーダーによって実行されます）、HTML5でHEVCMPEG-DASHストリームを視聴できます。 HEVCをサポートするMicrosoftEdgeなどのブラウザでのテストに成功しました。 また、Googleは最近、Chromiumブラウザでのサポートを発表しました。

それにもかかわらず、HEVCはインターネットビデオアセットの大部分でまだ利用できず、それをデコードできるデバイスはごくわずかです。 そしてもちろん、それは町の唯一のコーデックではありません。 オープンでロイヤリティフリーのビデオエンコーディングフォーマットVP9（VP8の後継）は、さらに優れたエンコーディング効率を目指しており、GoogleChromeやMicrosoftEdgeなどの一般的なブラウザですでにサポートされており、このコーデックはMSEとも互換性があります。 ただし、どのコーデックが毎日のストリーミングルーチンに組み込まれるかを予測することはできません。 しかし、VP8 / 9、AVC、HEVCのいずれであっても、MSEとMPEG-DASHの準備ができています。

今後のトレンドは360度ビデオで、これはHTML5で使用するのは非常に簡単です。 開発者は、MSEのアダプティブストリーミングサポートを利用し、JavaScriptまたはWebGLレンダリングレイヤーを追加するだけで、その上に360度のエクスペリエンスを実現できます。 最近、私はこのトピックと、HTML5、JavaScript、DASH、およびWebGLを使用して仮想現実用のNetflixのようなサービスを構築する方法について話しました。

結論

この記事があなたにウェブ上のビデオの状態と未来の良い概観を与えてくれることを願っています。 MSEとEMEは、FlashやSilverlightなどのプラグインに取って代わり、Web上のビデオのオープンスタンダードのエコシステムに向けた大きな一歩です。 さらに、HTML5は、デスクトップ、モバイル、スマートTV環境など、今日のマルチプラットフォームの世界で選択されているプラ​​ットフォームになりつつあります。

MPEG-DASHなどのストリーミング標準に加えて、コンテンツプロバイダーは、プラットフォームやデバイス間で統合されたビデオソリューションを利用できます。 バッファリングを防ぎ、読み込み時間を短縮し、各ユーザーの帯域幅とデバイスの状況に可能な限り最高の品質を提供する適応型ストリーミング形式を通じて、ユーザーエクスペリエンスを向上させることができます。