TECH I.S.

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イベントもあります。

例: JavaScript の使用





動画提供：ビッグバックバニー

完全なDOMリファレンスについては、HTMLオーディオ/ビデオDOMリファレンスを参照して下さい。

HTMLビデオタグ
タグ 説明
<video> ビデオまたは映画を定義します
<source> <video> や <audio>など、メディア要素の複数のメディアリソースを定義します。
<track> メディアプレーヤーでテキストトラックを定義します


チュートリアル