クイック スタート: アプリでのビデオの再生 (HTML)
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
このトピックでは、HTML5 の Video 要素を使用して、JavaScript を使った Windows ランタイム アプリでビデオを再生する方法について説明します。
JavaScript を使った Windows ランタイム アプリでオーディオとビデオを使用する別のサンプルについては、HTML メディア再生のサンプルに関するページをご覧ください。
Windows ランタイム アプリでサポートされるオーディオとビデオのメディア形式について詳しくは、「サポートされるオーディオとビデオの形式」をご覧ください。
必要条件
このトピックは、JavaScript で基本的な Windows ランタイム アプリを作成できることを前提としています。初めてのアプリ作成の説明については、「JavaScript を使った初めての Windows ストア アプリの作成」をご覧ください。
手順
1. インターネット クライアント機能を宣言する
アプリケーション マニフェスト ファイル package.appxmanifest.xml を開き、Internet (Client) capabilityを有効にします。
- Microsoft Visual Studio のソリューション エクスプローラーで package.appxmanifest 項目をダブルクリックして、アプリケーション マニフェストのデザイナーを開きます。
- [機能] をクリックします。
- Internet (Client) 機能のボックスをオンにします。
この機能により、アプリケーションにインターネットへの出力方向のアクセスが与えられます。これは、インターネット URL からビデオを再生するのに必要なアクセスです。
注 この機能は、ローカルのビデオ ファイルを再生するときには必要ありません。
2. video 要素を追加する
Default.html という名前の HTML ファイルを開き、video 要素をドキュメントの body に追加します。
<body>
<video id="mediaVideo" src="https://www.contoso.com/clip.mp4" controls/>
</body>
例にある "https://www.contoso.com/clip.mp4" の URL は実際の URL に置き換える必要があります。
Video 要素は組み込みの再生コントロールのセットを提供します。これにより、ユーザーはビデオの開始や一時停止、新しい位置のシーク、音量の調整を行うことができます。既定では、再生コントロールは表示されません。有効にするには、例に示したように controls 属性を追加するだけです。このコントロールはユーザーがビデオの上にマウスをホバーすると表示されます。
3. 幅と高さの属性を設定する
ビデオのサイズが前もってわかっている場合、video 要素の width 属性と height 属性を設定することをお勧めします。これらの属性は要素のレイアウト サイズをカスケード スタイル シート (CSS) ピクセル単位で指定します。ページが読み込まれるときに、その要素のためにスペースが確保されます。幅と高さの属性を指定しなかった場合、ビデオがダウンロードされてからページに自動的に再配置されます。
<body>
<video src="https://www.contoso.com/clip.mp4" controls width=640 height=480/>
</body>
幅と高さの属性は必ず CSS ピクセルで指定し、単位を付けないでください。たとえば、"5 cm" や "100%" は使うことができません。
幅と高さの属性がビデオの固有のサイズと一致しない場合、ビデオ コントロールは、必要に応じてレターボックスを使い、縦横比を保ったまま、ビデオを拡大します。しかし、視覚的なアーティファクトが生じる可能性があるため、ビデオが拡大されないようにすることをお勧めします。できる限り、目的の表示サイズでビデオをエンコードしてください。
要約
このトピックでは、<video> タグを使って URL でビデオを再生する方法を説明しました。
関連トピック
ロードマップ
JavaScript を使った Windows ランタイム アプリのためのロードマップ
サンプル
名前空間のリファレンス
その他のリソース