<video>: 動画埋め込み要素

HTML の映像要素 (<video>) は、文書中に動画再生に対応するメディアプレイヤーを埋め込みます。 <video> を音声コンテンツのために使用することもできますが、 <audio> 要素の方がユーザーに取って使い勝手が良いかもしれません。

属性

この要素にはグローバル属性があります。

autoPlay

論理型の属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。

自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。

映像の自動再生を無効にするために autoplay="false" を指定しても機能しません。 <video> タグにこの属性があれば、映像が自動的に再生されます。自動再生を無効にするには、属性を完全に取り除くことが必要です。

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 であり、映像再生時に音声も再生することを表します。

played

再生済みの映像の範囲を示す TimeRanges オブジェクトです。

preload

この列挙属性は、最良のユーザーエクスペリエンスに関する作者の考えについて、ブラウザーにヒントを与えるものです。以下の値のうちひとつを持つことができます:

• none: 映像を事前に読み込むべきではないことを示します。
• metadata: 映像のメタデータ (例えば、長さ) を読み込みます。
• auto: ユーザーが映像ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
• 空文字列: これは auto 値と同義です。

この属性を設定しない場合の既定値はブラウザーが定義します (つまり、ブラウザーが既定値を選択できます)。仕様書では metadata にするよう助言しています。

使用上の注意:

• autoplay 属性は preload より優先します。autoplay を指定すると、言うまでもなくブラウザーは映像を再生するためにダウンロードを始めなければなりません。
• 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。

poster

動画のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されません。その後、最初のフレームをポスターフレームとして表示します。

src

埋め込む映像コンテンツへの URL を指定します。この属性は省略可能です。埋め込む映像の指定には、video 要素のブロック内で <source> を使用することもできます。

width

映像の表示領域の幅を指定します。CSS ピクセル値 で指定します。-- (絶対値に限ります。パーセンテージは不可)

playsinline

映像を "インライン" で再生する、すなわち要素の再生エリア内で再生するかを指定する論理属性です。この属性がないことが、映像を常にフルスクリーンで再生するという意味ではないことに注意してください。

イベント

<video> 要素では、さまざまなイベントが発生します。

使用上の注意

• <video> 要素は、1 つまたは複数の映像ソースを含むことができます。映像ソースは src 属性または <source> 要素を使用して表し、ブラウザーはもっとも適切なソースを選択します。対応している形式の一覧については、HTML5 の audio 及び video 要素で対応しているメディア形式 をご覧ください。
• object-position プロパティで要素の枠内で動画の表示位置を調整することができ、 object-fit プロパティでどのようにフレーム内に動画の寸法を合わせるのかを制御できます。

例

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video controls
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
    width="620">

すみませんが、このブラウザーは埋め込み動画に対応していません。
しかし、<a href="https://archive.org/details/BigBuckBunny_124">ダウンロード</a>
してお好きな動画プレイヤーで見ることはできます。

</video>

この例はアクティブ化されたときに、ブラウザー既定の動画コントロールをユーザーに表示して動画を再生します。動画の再生が始まるまで、指定された画像がその場所に表示されます。ブラウザーが動画の再生に対応していない場合は、フォールバックテキストが表示されます。

複数のソースを置く例

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video width="620" controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg" >
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi">
  Your browser doesn't support HTML5 video tag.
</video>

この例ではメディアとして 3 つの異なるソースを提供しており、ブラウザーがどの映像コーデックを対応しているかに関係なく動画を視聴できます。はじめに WebM を試します。再生できない場合は、MP4 を試します。最後に OGG を試します。 video タグに対応していない場合はフォールバックメッセージを表示しますが、すべてのソースに失敗した場合は表示しません。

サーバーの対応

サーバーで映像の MIME タイプが適切に設定されていないと、映像が表示されないか X 印がついた灰色のボックスが表示される (JavaScript が有効である場合) 可能性があります。

Ogg Theora 形式で映像を提供する場合、Apache Web Server では "video/ogg" MIME タイプに映像ファイルの拡張子を追加すると問題が解決します。もっとも一般的な映像ファイルの拡張子は ".ogm"、".ogv"、".ogg" です。"/etc/apache" の "mime.types" ファイルを編集するか、httpd.conf で "AddType" ディレクティブを使用してください。

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

WebM 形式で映像を提供する場合、 Apache Web Server では "/etc/apache" の "mime.types" ファイルまたは httpd.conf の "AddType" ディレクティブで映像ファイルの拡張子 (一般的には ".webm") を MIME type "video/webm" に追加することで問題が解決します。

AddType video/webm .webm

ウェブホスティングサービスでは、全体の更新が行われるまでの間、新技術向けに MIME タイプの設定を変更するための簡単なインターフェイスを提供しているかもしれません。

アクセシビリティの考慮事項

動画には、実際にコンテンツを説明する字幕と文字化情報 (transcript) を提供するべきです。字幕によって聴力を失った人が、動画の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、音声コンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で内容を確認できるようになります。

自動字幕サービスが使用されている場合は、生成されたコンテンツが元の動画を正しく表現しているかを確認することが重要です。

字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。

14
00:03:14 --> 00:03:18
[ドラマチックなロック音楽]

15 
00:03:19 --> 00:03:21
[ささやき] 遠くにあるものは何ですか？

16
00:03:22 --> 00:03:24
それは……それは……

16 00:03:25 --> 00:03:32
[ぶつかる大きな音]
[皿の割れる音]

字幕は動画の主題を邪魔しないようにしてください。これは align VTT キュー設定を使用して位置を決めることができます。

• MDN 字幕とクローズドキャプション - プラグイン
• Web Video Text Tracks Format (WebVTT)
• WebAIM: Captions, Transcripts, and Audio Descriptions
• MDN WCAG を理解する ― ガイドライン 1.2 の解説
• Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0

仕様書

ブラウザーの対応

このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。

関連情報

• audio 要素と video 要素で対応しているメディア形式
• フレーム内における画像の位置と寸法の設定: object-position and object-fit
• <audio>
• HTML5 での動画や音声の使用
• canvas を用いた動画の操作
• Ogg メディアのサーバーの構成