HTML Living Standard/video

video 要素

<video> 要素は、ウェブページに動画コンテンツを埋め込むために使用されます。この要素は、動画の再生を制御するためのインターフェースを提供し、複数のソース形式をサポートしています。<video> 要素は、ユーザーがインタラクティブに操作できる動画プレーヤーを埋め込むために利用され、オプションでコントロールを提供することができます。

カテゴリ

フローコンテンツ
メタデータコンテンツ
複数メディア要素をサポートする要素

使用される文脈

メタデータコンテンツが期待される場所
フローコンテンツが期待される場所

コンテンツモデル

<video> 要素は、以下の内容を含むことができます：

<source> 要素（動画ソースの指定）
type 属性を使用して指定された動画ファイルの種類
<track> 要素（字幕やキャプションなどのメタデータ）

タグの省略

<video> 要素は省略不可能なタグです。開始タグと終了タグを必ず記述する必要があります。

属性

<video> 要素には以下の属性があります：

グローバル属性 — すべてのHTML要素に共通の属性（id, class, style など）。
controls — 動画プレーヤーのコントロール（再生、停止、音量調整、進捗バーなど）を表示します。これを設定することでユーザーが動画を制御できるようになります。
autoplay — ページの読み込み後、自動的に動画を再生します。
loop — 動画が終了すると最初から繰り返し再生されます。
muted — 初期状態で動画の音声をミュートします。
preload — 動画の読み込み方法を指定します。auto（自動的に読み込む）、metadata（メタデータのみを読み込む）、none（読み込まない）から選択します。
poster — 動画が読み込まれる前に表示する画像を指定します。動画のサムネイルとして使われます。
src — 動画ファイルのURLを指定します。
crossorigin — クロスオリジンリクエストを処理する方法を指定します。
integrity — サブリソース整合性チェックに使われるメタデータ。
referrerpolicy — 要素によって開始されたフェッチのリファラーポリシーを指定します。

使用例

基本的な動画の埋め込み

動画ファイルを再生するための基本的なコードです。

<video controls>
  <source src="video/example.mp4" type="video/mp4">
  <source src="video/example.webm" type="video/webm">
  <source src="video/example.ogv" type="video/ogg">
  Your browser does not support the video element.
</video>

この例では、controls 属性を使用して、ユーザーに再生、停止、音量調整などのインタラクティブな操作を提供します。また、<source> 要素を使って、複数の動画形式（MP4、WebM、Ogg）を指定し、ブラウザが対応するフォーマットを選択して再生します。

ポスター画像の指定

動画のサムネイル画像を指定する例です。

<video controls poster="video/poster.jpg">
  <source src="video/example.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

ここでは、poster 属性を使用して、動画の読み込み前に表示される画像（poster.jpg）を指定しています。

アクセシビリティの考慮事項

<video> 要素には、動画コンテンツをアクセシブルにするためのさまざまな考慮が必要です。動画に音声解説や字幕を追加することで、視覚や聴覚に障害のあるユーザーにも対応することができます。<track> 要素を使って、字幕、キャプション、音声解説などを提供することが推奨されます。

また、controls 属性を使うことで、ユーザーが動画の再生や停止、音量調整を行えるようにします。これにより、ユーザーがインタラクティブに動画を操作できるようになります。

DOM インターフェース

<video> 要素は、HTMLVideoElement インターフェースを通じて操作されます。このインターフェースは、動画再生の制御に関連するプロパティやメソッドを提供します。

const videoElement = document.querySelector('video');
videoElement.play(); // 動画の再生
videoElement.pause(); // 動画の一時停止

このインターフェースを使用して、プログラムから動画の再生や一時停止を制御することができます。