HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<video>
動画埋め込み要素。Webページに動画プレイヤーを埋め込むために使用します。
info
概要
<video> 要素は、HTMLドキュメントにビデオまたは動画コンテンツを埋め込むために使用されます。
Flashなどのプラグインに頼らず、ブラウザ標準の機能で動画再生を実現し、controls 属性で再生、一時停止、音量などの標準コントロールを表示できます。
play_circle
デモ (静的表示)
HTML (Source)
<video width="250" height="140" controls poster="poster.jpg">
<source src="sample.mp4" type="video/mp4">
<p>お使いのブラウザは動画に対応していません。</p>
</video>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| src | 埋め込む動画ファイルのURLを指定します。ただし、複数の形式に対応するため、通常は<source>要素を使います。 |
| controls | この属性が存在する場合、ブラウザ標準の再生/一時停止、音量などのコントロールを表示します。 |
| autoplay | ページ読み込み後に動画を自動的に再生します。多くのブラウザで**ミュート**が必須です。 |
| loop | この属性が存在する場合、動画が終端に達したときに先頭に戻って再生を繰り返します。 |
| muted | この属性が存在する場合、デフォルトで音声がミュート（消音）になります。自動再生に必須となることが多いです。 |
| poster | 動画がダウンロードされている間、またはユーザーが再生を開始する前までに表示される静止画のURLを指定します。 |
| width, height | 動画プレイヤーの幅と高さをピクセル単位で指定します。 |
| preload | 動画を事前に読み込むべきかどうかをブラウザに示唆します。none, metadata, auto
|
code
実用例
1. 基本的な動画プレイヤー
<video src="movie.mp4" width="600" controls>
<p>動画を再生できません</p>
</video>
2. 複数フォーマット対応と自動再生
<video autoplay loop muted playsinline>
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
<p>動画はブラウザでサポートされていません。</p>
</video>
3. 字幕・キャプションの追加 (Web VTT)
<video src="movie.mp4" controls>
<track src="caption_ja.vtt" kind="captions" srclang="ja" label="日本語" default>
</video>
lightbulb
知っておくべき重要事項
volume_off
自動再生に関する制限
多くのモダンブラウザ（Chrome, Safariなど）では、ユーザー体験の向上とデータ通信量の節約のため、音声のある動画の自動再生（
多くのモダンブラウザ（Chrome, Safariなど）では、ユーザー体験の向上とデータ通信量の節約のため、音声のある動画の自動再生（
autoplay）をブロックします。自動再生を有効にするには、通常 muted 属性を同時に指定する必要があります。
accessibility_new
アクセシビリティ
動画には必ず**キャプション（字幕）**や**トランスクリプト（文字起こし）**を提供しましょう。聴覚に障害を持つユーザーや、ミュート状態で視聴するユーザーにとって非常に重要です。キャプションには
動画には必ず**キャプション（字幕）**や**トランスクリプト（文字起こし）**を提供しましょう。聴覚に障害を持つユーザーや、ミュート状態で視聴するユーザーにとって非常に重要です。キャプションには
<track> 要素を使用します。