HTML - video 要素

概要

名前
video
カテゴリー
  • Flow content
  • Phrasing content
  • Embedded content
  • Interactive content
  • Palpable content
配置できる場所
Embedded content が期待される場所。
コンテンツモデル
src 属性がある場合、0 個以上の track 要素と、それに続く Transparent。src 属性がない場合、0 個以上の source 要素と、それに続く 0 個以上の track 要素と、それに続く Transparent。video 要素、または audio 要素の祖先になってはいけない。
説明
video 要素は、動画を再生させる要素です。字幕付きの音声ファイルを再生するために使用することもできます。一方で audio 要素は字幕を表示させる領域を持ちません。要素内容には video 要素をサポートしていない古いブラウザ向けの内容 (動画ファイルへの直接リンクなど) を入れることができます。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLVideoElement
仕様書
仕様書策定状況コメント
LS:現行の標準
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
93.533.110.5
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
autoplay93.533.110.510
buffered4
controls93.533.110.5
crossorigin12
height93.533.110.5
intrinsicsize715871
loop91133.110.56
muted1011305
played15
poster93.633.110.5
preload9433.1
src93.533.110.5
width93.533.110.5
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
autoplay
論理型の属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。自動的に音声 (あるいは音声トラックを含む映像) を再生するサイトはユーザにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザが明示的に有効化することを求める) にするべきです。ただし、ユーザの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。映像の自動再生を無効にするために autoplay="false" を指定しても機能しません。video タグにこの属性があれば、映像が自動的に再生されます。自動再生を無効にするには、属性を完全に取り除くことが必要です。また、一部のブラウザ (Chrome 70.0 など) では、muted 属性がないと autoplay は動作しません。
buffered
メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は TimeRanges オブジェクトを持ちます。
controls
この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。
crossorigin
この列挙型の属性は、関連画像を取得する際に CORS を使用するかを示します。CORS が有効なリソース は、汚染されることなく canvas 要素で再利用できます。次の値が使用できます:
anonymous
認証情報を伴わずにオリジン間リクエストを実行します。つまり、Cookie や X.509 証明書がない Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行いません。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダーの設定なし)、画像が汚染され、その使用も制限されます。
use-credentials
クレデンシャルを伴ってオリジン間要求を実行します。つまり、Cookie や X.509 証明書を伴う Origin: HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Credentials: HTTP ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性が提供されない場合、リソースは CORS 要求なしで取得され (Origin: HTTP ヘッダーを送信せずに取得)、canvas 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに anonymous が指定されたものとして扱われます。追加の情報は CORS 設定属性 を参照してください。
height
映像の表示領域の高さを、 CSS ピクセル値で指定します。絶対的な値でなければなりません。パーセント値は使用できません。
loop
論理型の属性です。指定された場合、ブラウザは映像の末尾に達すると、自動的に先頭に戻ります。
muted
論理型の属性で、映像に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は false であり、映像再生時に音声も再生することを表します。
preload
列挙型の属性で、映像が再生される前に、どのコンテンツを読み込むとユーザに最高の使い勝手をもたらすかについての作者の考えを、ブラウザに対するヒントとしてを提供するためのものです。以下の値のうちひとつを持つことができます。
  • none: 映像を事前に読み込むべきではないことを示します。
  • metadata: 映像のメタデータ (例えば、長さ) を読み込みます。
  • auto: ユーザが映像ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
  • (空文字): これは auto 値と同義です。
既定値はブラウザごとに異なります。仕様書では metadata を設定するよう助言しています。autoplay 属性は preload より優先します。autoplay を指定すると、ブラウザは映像を再生するためにダウンロードを始めなければなりません。仕様書は、ブラウザがこの属性の値に従うことを強制していません。これは単なるヒントです。
playsinline
論理属性で、映像を「インライン」で再生する、すなわち要素の再生エリア内で再生するかを指定します。この属性がないことが、映像を常にフルスクリーンで再生するという意味ではないことに注意してください。
poster
映像のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。
src
埋め込む映像コンテンツへの URL を指定します。この属性は省略可能です。埋め込む映像の指定には video 要素のブロック内で source を使用することもできます。
width
映像の表示領域の幅を、 CSS ピクセル値で指定します。絶対的な値でなければなりません。パーセント値は使用できません。

非推奨の属性

以下の属性は非推奨、非標準、実験的、または廃止された属性のため、使用しないでください。

intrinsicsize
実験的。動作が変更される可能性があります。
非標準。ブラウザ間の互換性が低い可能性があります。

サンプルコード

video 要素のサンプルコードは以下のとおりです。

<video controls
    src="https://example.com/example.mp4"
    width="620">
このブラウザは埋め込み映像に対応していません。
</video>
video 要素のサンプルコード

関連記事