HTML <video> タグ

コース推薦：

<video> 定義と使用方法

<video> タグは、ドキュメントにビデオコンテンツ（例えば映画の一部や他のビデオストリーム）を埋め込むために使用されます。 タグは、異なるビデオソースを含む1つまたは複数のタグを含みます。<source>タグ

<video> 。ブラウザはサポートする最初のソースを選択します。 </video> および <video> タグの間のテキストはサポートしない場合にのみ表示されます。

HTMLはMP4、WebM、OGGの3つのビデオ形式をサポートしています。

ブラウザ MP4 WebM Ogg
Edge サポート サポート サポート
Chrome サポート サポート サポート
Firefox サポート サポート サポート
Safari サポート サポート サポートしない
Opera サポート サポート サポート

また参照してください：

HTML DOM リファレンスマニュアル：HTML Audio/Video DOM リファレンスマニュアル

例

ビデオを再生：

<video width="640" height="360" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  あなたのブラウザはビデオタグをサポートしていません。
</video>

実際に試してみてください

ヒントとコメント

ヒント：オーディオファイルについては<audio>タグを参照してください。

オプションの属性

属性 値 説明
autoplay autoplay ビデオが準備できたらすぐに再生を開始するように設定します。
controls controls 表示するビデオコントロール（例えば再生/一時停止ボタンなど）を指定します。
height ピクセル ビデオプレイヤーの高さを設定します。
loop loop ビデオが終わったら再び最初から再生されるように設定します。
muted muted ビデオのオーディオ出力をミュートにするかどうかを指定します。
poster URL ビデオのダウンロード中やユーザーが再生ボタンをクリックする前に表示される画像を指定します。
preload
  • auto
  • metadata
  • none
 ページが読み込まれた際にビデオが読み込まれるかどうか、またはどのように読み込まれるかを指定します。
src URL ビデオファイルのURLを指定します。
width ピクセル ビデオプレイヤーの幅を設定します。

グローバル属性

<video> タグは以下のサポートも行います HTML 中のグローバル属性。

イベント属性

<video> タグは以下のサポートも行います HTML 中のイベント属性。

デフォルトの CSS 設定

なし。

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.1 11.5