HTMLビデオ
HTMLの<video>要素は、Web ページにビデオを表示するために使用されます。
HTML <video> 要素
ビデオをHTMLで表示するには、<video>要素を使用します。
例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
お使いのブラウザはvideoタグをサポートしていません。
</video>
使い方
controls属性は、再生、一時停止、音量などのビデオ コントロールを追加します。
widthとheight属性を常に含めることをお勧めします。高さと幅が設定されていない場合、ビデオの読み込み中にページがちらつくことがあります。
<source>要素を使用すると、ブラウザが選択できる代替ビデオファイルを指定できます。ブラウザーは、最初に認識された形式を使用します。
<video>タグと</video>タグの間のテキストは、サポートしていないブラウザーでのみ表示されます。
HTML<ビデオ>自動再生
ビデオを自動的に開始するには、autoplay属性を使用します。
例
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
お使いのブラウザはvideoタグをサポートしていません。
</video>
注：ほとんどの場合、Chromiumブラウザーは自動再生を許可しません。ただし、ミュートされた自動再生は常に許可されます。
自動再生の後にミュートを追加して、ビデオの再生が自動的に開始されるようにします(ただしミュートされます)。
例
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
お使いのブラウザはvideoタグをサポートしていません。
</video>
ブラウザのサポート
表の番号は、要素を完全にサポートする最初のブラウザ バージョンを示しています。
| 要素 | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTMLビデオ形式
サポートされているビデオ形式は、MP4、WebM、およびOggの3つです。さまざまな形式に対するブラウザーのサポートは次のとおりです。
| ブラウザ | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | はい | はい | はい |
| Chrome | はい | はい | はい |
| Firefox | はい | はい | はい |
| Safari | はい | はい | いいえ |
| Opera | はい | はい | はい |
HTMLビデオ-メディアの種類
| ファイル形式 | メディアタイプ |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTMLビデオ-メソッド、プロパティ、およびイベント
HTMLDOMは、<video>要素のメソッド、プロパティ、およびイベントを定義します。
これにより、動画の読み込み、再生、一時停止、および時間と音量の設定が可能になります。
ビデオの再生開始、一時停止などを通知できるDOMイベントもあります。
完全なDOMリファレンスについては、HTMLオーディオ/ビデオDOMリファレンスを参照して下さい。
HTMLビデオタグ
| タグ | 説明 |
|---|---|
| <video> | ビデオまたは映画を定義します |
| <source> | <video> や <audio>など、メディア要素の複数のメディアリソースを定義します。 |
| <track> | メディアプレーヤーでテキストトラックを定義します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。