WebVideoPlayer™ コントロールは、HTML5 固有の <video> タグを使用してビデオを再生します。これは、最も人気のあるブラウザーの以下のバージョンでサポートされています。
これらのブラウザーの古いバージョンは、HTML5 ビデオと互換性がありません。以前のバージョンのブラウザーでコントロールを初期化すると、 BrowserNotSupported イベントが発生することになります。処理されない場合にはそれぞれのサポートされたブラウザーのダウンロード ページへのリンクと共に、ユーザー フレンドリなメッセージが表示されます。
HTML5 ビデオをサポートしないブラウザーの場合に希望する操作が異なる場合には、BrowserNotSupported イベントを処理して、Microsoft® Silverlight™ または Adobe® Flash™ を使用して代替えのビデオ プレーヤーを表示するなどカスタム ロジックを実行できます。以下のコードはこれを示しています。
ASPX の場合:
<igjq:WebVideoPlayer ID="player1" runat="server">
<Sources>
<igjq:VideoPlayerSource Source="example_video1.mp4" />
<igjq:VideoPlayerSource Source="example_video2.webm" />
<igjq:VideoPlayerSource Source="example_video3.ogv" />
</Sources>
<ClientEvents BrowserNotSupported="onBrowserNotSupported" />
</igjq:WebVideoPlayer>
JavaScript の場合
function onBrowserNotSupported(sender, args) {
$("#flashContainer").css("display", "block");
$("#<%= this.player1.ClientID %>").css("display", "none");
eventArgs.cancel = true;
}
それぞれのブラウザーには、ビデオ タグを処理する独自の方法があり、1 つ以上のビデオ コーデックをサポートしています。今のところ、全てをサポートしているコーデックは存在しません。そのため、ビデオを人気のあるブラウザーすべてで表示可能にするには、ビデオを複数回エンコードする必要があります。
現在のブラウザーでサポートされているコーデックの完全なリストを以下に示します。
* エンドユーザーが VP8 コーデックをインストールしている場合、Internet Explorer 9 は WebM のみをサポートします。
** Safari は、Apple® QuickTime™ で再生できるものはなんでも再生できますが、QuickTime では H.264/AAC/MP4 サポートのみがあらかじめインストールされています。
注: ブラウザーのサポートに関する最新データについては、 http://en.wikipedia.org/wiki/HTML5_video をご覧ください。 http://en.wikipedia.org/wiki/HTML5_video
多くの場合、上に挙げたコーデック/コンテナーの組み合わせをそれぞれ使用して、ビデオをエンコードする必要があります。3 つのファイルへのパスをコントロールに渡す必要があります。ブラウザーが複数の種類をサポートしている場合、コントロールはブラウザーに最適なものを選択します。優先順位は以下のようになります。
MP4 コンテナーの H264/AAC
Ogg コンテナーの Theora/Vorbis
WebM
選択したソースはビデオ タグの src 属性に追加されます。
組み込み関数を使用して、独立した 3 つのコーデック/コンテナーの組み合わせの互換性を特定のブラウザーでテストすることも可能です。
JavaScript の場合
var supportsHTML5 = $("#<%= this.player1.ClientID %>").igVideoPlayer("supports_video");
var supportsH264 = $("#<%= this.player1.ClientID %>").igVideoPlayer("supports_h264_baseline_video");
var supportsOgv = $("#<%= this.player1.ClientID %>").igVideoPlayer("supports_ogg_theora_video");
var supportsWebM = $("#<%= this.player1.ClientID %>").igVideoPlayer("supports_webm_video");