HTML & CSS

最終更新日:
公開日:

リファレンス

HTML

ビデオ

video要素

ページに動画を埋め込む場合に使用します。特別なプラグインなしに動画を扱えるので非常に便利ですが、ブラウザによって対応しているファイル形式やコントローラに違いがあるので注意が必要です。

サンプルコード

<video width="600" height="400" controls>
	<source src="/movie/graycode.mp4" type="video/mp4">
	<source src="/movie/graycode.ogv" type="video/ogg">
	<source src="/movie/graycode.webm" type="video/webm">
</video>
  • カテゴリー

    フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、インタラクティブコンテンツ(controls属性を持つ場合)、パルパブルコンテンツ

  • コンテンツモデル

    src属性を持つ場合:0個以上のtrack要素、それ以降トランスペアレント。
    src属性を持他ない場合:0個以上のsource要素、それ以降、0個以上のtrack要素。さらにそれ以降はトランスペアレント。
    いずれの場合も、メディア系要素を子孫要素に持つことは不可。

  • 使用ケース

    埋め込みコンテンツが期待される場所

属性

グローバル属性

下記の属性に加え、グローバル属性を指定することもできます。
グローバル属性について詳しくは、「HTMLのグローバル属性」をご覧ください。

src

読み込む動画ファイルのURLを指定します。

crossorigin

この属性は、読み込む動画ファイルをCORSを使用して取得するか、そうでないかを示します。CORSが有効な動画ファイルは、同じサイトから提供された画像のようにcanvas要素で再利用できます。

  • anonymous

    クロスオリジン要求は実行されますが、信用情報は送信されません。サーバがリソース提供元サイトに信用情報を付与しない場合、動画ファイルの使用は制限されます。

  • use-credentials

    クロスオリジン要求は実行され、信用情報も送信されます。信用情報の送信にはCookie、証明書、ベーシック認証が使用されます。しかし、サーバーがリソース提供元サイトに信用情報を付与しない場合、動画ファイルの使用は制限されます。

poster

動画ファイルを再生するまでの間、または再生できない時に表示する画像URLを指定します。

preload

動画ファイルの読み込みについて指定します。

  • none

    動画ファイルをバッファリングしません。閲覧者がメディアのリソースを必要としているかが分からず、サーバーのトラフィックを最小限にしたいときにこの値を指定します。この値を設定すると、動画ファイルの読み込みを積極的には行いません。

  • metadata

    動画ファイルのメタデータ(再生時間の長さなど)のみバッファリングします。

  • auto

    動画ファイル全体をバッファリングする旨をブラウザへ伝えます。初期値です。

autoplay

動画ファイル読み込み後、自動再生を行うかを指定します。

mediagroup

音声・動画ファイルのグループ名を指定します。1ページ内に同じグループ名を持つ要素がある場合、連続再生が可能です。

loop

動画のループ(エンドレス)再生を指定します。論理属性です。

muted

ミュート(消音)を初期設定にしたい場合に指定します。自動で再生開始される設定のとき、こちらの方が親切な場合があります。論理属性です。

controls

再生コントローラを表示する際に指定します。コントローラの内容はブラウザによって異なります。論理属性です。

width

再生エリアの横幅を指定します。

height

再生エリアの縦幅を指定します。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。