次の方法で共有


クイック スタート: アプリでのビデオの再生 (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を有効にします。

  1. Microsoft Visual Studio のソリューション エクスプローラーで package.appxmanifest 項目をダブルクリックして、アプリケーション マニフェストのデザイナーを開きます。
  2. [機能] をクリックします。
  3. 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 ランタイム アプリのためのロードマップ

アプリの UX の設計

マルチメディアの追加

サンプル

HTML メディア再生のサンプル

メディア拡張機能のサンプル

名前空間のリファレンス

Windows.Media

Windows.Media.PlayTo

Windows.Media.Protection

HTML5 のオーディオとビデオ

その他のリソース

サポートされるオーディオとビデオの形式

オーディオとビデオのパフォーマンス

オーディオ/ビデオの再生中に表示をオンのままにする方法