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">
Your browser does not support the video tag.
</video>
使い方
このcontrols属性は、再生、一時停止、音量などのビデオコントロールを追加します。
常に属性を含めることをお勧めしwidthますheight。高さと幅が設定されていない場合、ビデオの読み込み中にページがちらつくことがあります。
この<source>要素を使用すると、ブラウザが選択できる代替ビデオファイルを指定できます。ブラウザは最初に認識された形式を使用します。
<video>タグとタグの間のテキストは、要素</video>をサポートしていないブラウザでのみ表示されます。<video>
HTML <ビデオ>自動再生
ビデオを自動的に開始するには、次のautoplay属性を使用します。
例
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
注： Chromiumブラウザーでは、ほとんどの場合、自動再生は許可されていません。ただし、ミュートされた自動再生は常に許可されます。
muted後に追加し
autoplayて、ビデオの自動再生を開始します（ただしミュートされます）。
例
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
ブラウザのサポート
表の数字は、
<video>要素を完全にサポートする最初のブラウザバージョンを示しています。
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTMLビデオフォーマット
サポートされているビデオ形式には、MP4、WebM、およびOggの3つがあります。さまざまな形式のブラウザサポートは次のとおりです。
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTMLビデオ-メディアタイプ
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTMLビデオ-メソッド、プロパティ、およびイベント
HTML DOMは、要素のメソッド、プロパティ、およびイベントを定義します<video>。
これにより、動画の読み込み、再生、一時停止、および再生時間と音量の設定が可能になります。
ビデオの再生が開始されたとき、一時停止されたときなどに通知できるDOMイベントもあります。
完全なDOMリファレンスについては、HTMLオーディオ/ビデオDOMリファレンスにアクセスしてください。
HTMLビデオタグ
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |