検索結果

video 要素

この記事内

使用可能な場所
属性
イベント
例
複数のソースを置く例
サーバのサポート
DOM インターフェイス
ブラウザ実装状況
関連情報

HTML <video> 要素は、映像コンテンツを埋め込むために用いられます。この要素は、複数の映像ソースを含むことができます。映像ソースは src 属性または <source> 要素を使用して表し、ブラウザはもっとも適切なソースを選択します。

サポートしている形式の一覧については、HTML5 の audio 要素と video 要素でサポートされているメディアフォーマットをご覧ください。

使用可能な場所

コンテンツカテゴリ	フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ。`controls` 属性を持つ場合は、インタラクティブコンテンツおよびパルパブルコンテンツ。
許可された内容	要素が `src` 属性を持つ場合: 0 個以上の `<track>` 要素とそれに続く、メディア要素を含まないトランスパレントコンテンツ。すなわち `<audio>` 要素や `<video>` を子要素として配置してはなりません。その他の場合: 0 個以上の `<source>` 要素、0 個以上の `<track>` 要素、メディア要素を含まないトランスパレントコンテンツ。すなわち `<audio>` 要素や `<video>` を子要素として配置してはなりません。
タグの省略	不可。開始と終了タグの両方が必要。
許可された親要素	埋め込みコンテンツを受け入れるすべての要素。
DOM インターフェイス	`HTMLVideoElement`

属性

autoplay

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

autobuffer

ブール型。この属性が指定された場合、自動再生が無効である場合でも映像のバッファリングを自動開始します。この属性は、映像が再生される可能性が高いと考えられる場合 (例えばユーザを、他のコンテンツともに映像を埋め込んでいるページではなく映像の再生に特化したページへ案内する場合) に使用するべきです。映像はメディアキャッシュを満たすまでバッファリングされます。

実装メモ: autobuffer 属性は HTML5 仕様の初期の草案に存在していましたが、最新の版では削除されています。Gecko 2.0 および他のブラウザでは廃止されており、また一切実装されていないブラウザもあります。仕様では autobuffer 属性を置き換える新たな列挙属性 preload を、別の構文で定義しています。バグ 548523

buffered

メディアがどれだけの時間分バッファリングされたかを判断するために、読み取ることが可能な属性です。この属性は TimeRanges オブジェクトを持ちます。

controls

この属性が指定された場合、再生・一時停止、音量、シーク、ポーズの各機能を制御するコントロールを表示します。

crossorigin

この列挙型の属性は、関連画像を CORS を使用して取得しなければならないか、そうでないかを示します。CORS が有効なリソースは、汚染されることなく <canvas> 要素で再利用できます。次の値が使用できます:

anonymous: クロスオリジン要求 (Origin: HTTP ヘッダを持つ要求) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、HTTP ベーシック認証は利用されません)。サーバが元のサイトに信用情報を付与しない場合 (Access-Control-Allow-Origin: HTTP ヘッダの設定なし)、画像が汚染され、その使用も制限されます。
use-credentials: クロスオリジン要求 (Origin: HTTP ヘッダを持つ要求) が実行され、信用情報が送信されます (Cookie、証明書、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

映像データが利用不可能な場合に表示される画像データを URI 形式で指定します。この属性が指定されない場合、再生可能な映像データがない場合は何も表示されません。

src

埋め込む映像コンテンツへの URL を指定します。

width

映像の表示領域の幅を指定します。 CSS ピクセルで指定します。

イベント

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

例

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, 
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

1 番目の例では、データのダウンロードのために再生途中に一時停止する必要がない程度までデータを受信できると、自動的に再生が始まります。また映像の再生が始まるまで、その場所に画像 "posterimage.jpg" を表示します。

2 番目の例では、ユーザがさまざまな字幕を選択できます。

複数のソースを置く例

<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4" type="video/mp4">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv" type="video/ogg">
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  Your browser doesn't support HTML5 video tag.
</video>

上記の例を試してみることができます! ライブプレビューコードエディタつきの、HTML5 video のデモをご覧ください。

サーバのサポート

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

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

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

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

DOM インターフェイス

この要素は HTMLVideoElement インターフェイスを提供します。

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本サポート	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`autoplay` 属性	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`buffered` 属性	?	4.0 (2.0)	?	(有)	?
`controls` 属性	3.0	3.5 (1.9.1)	9.0	10.5	3.1
`crossorigin` 属性	?	12.0 (12.0)	?	?	?
`loop` 属性	3.0	11.0 (11.0)	9.0	10.5	3.1
`muted` 属性	30.0	11.0 (11.0)	10.0	(有)	5.0
`played` プロパティ	?	15.0 (15.0)	?	(有)	?
`poster` 属性	3.0	3.6 (1.9.2)	9.0	10.5	3.1
`preload` 属性	3.0	4.0 (2.0)	9.0	(有)	3.1
`src` 属性	3.0	3.5 (1.9.1)	9.0	10.5	3.1

機能	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基本サポート	?	1.0 (1.0)	?	?	?
`autoplay` 属性	?	1.0 (1.0)	8.1	?	(有)^[1]
`buffered` 属性	?	4.0 (2.0)	?	?	?
`controls` 属性	?	1.0 (1.0)	?	?	?
`loop` 属性	?	11.0 (11.0)	8.0	?	6.0
`muted` 属性	?	11.0 (11.0)	8.0	?	?
`played` プロパティ	?	15.0 (15.0)	?	?	?
`poster` 属性	?	1.0 (1.0)	?	?	?
`preload` 属性	?	4.0 (2.0)	?	?	?
`src` 属性	?	1.0 (1.0)	?	?	?
`crossorigin` 属性	?	12.0 (12.0)	?	?	?

[1] この機能は iOS 6.0 で使用できます。

ドキュメントのタグと貢献者

タグ:

このページの貢献者: yyss, ethertank, RobinEgg

最終更新者: yyss, 2015/11/08 6:44:26

<embed>
audio 要素
map 要素
object 要素
param 要素
source 要素
track 要素
video 要素
HTML Elements
1. A
  1. <a>
  2. <abbr>
  3. ~~<acronym>~~
  4. <address>
  5. ~~<applet>~~
  6. <area>
  7. <article>
  8. <aside>
  9. <audio>
2. B
  1. <b>
  2. <base>
  3. ~~<basefont>~~
  4. <bdi>
  5. <bdo>
  6. ~~<bgsound>~~
  7. ~~<big>~~
  8. ~~<blink>~~
  9. <blockquote>
  10. <body>
  11. <br>
  12. <button>
3. C
  1. <canvas>
  2. <caption>
  3. ~~<center>~~
  4. <cite>
  5. <code>
  6. <col>
  7. <colgroup>
  8. <content>
4. D
  1. <data>
  2. <datalist>
  3. <dd>
  4. <del>
  5. <details>
  6. <dfn>
  7. ~~<dir>~~
  8. <div>
  9. <dl>
  10. <dt>
5. E
  1. <em>
  2. <embed>
6. F
  1. <fieldset>
  2. <figcaption>
  3. <figure>
  4. ~~<font>~~
  5. <footer>
  6. <form>
  7. ~~<frame>~~
  8. ~~<frameset>~~
7. G H
  1. <h1>
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>
  7. <head>
  8. <header>
  9. ~~<hgroup>~~
  10. <hr>
  11. <html>
8. I
  1. <i>
  2. <iframe>
  3. <img>
  4. <input>
  5. <ins>
  6. ~~<isindex>~~
9. J K
  1. <kbd>
  2. <keygen>
10. L
  1. <label>
  2. <legend>
  3. <li>
  4. <link>
  5. ~~<listing>~~
11. M
  1. <main>
  2. <map>
  3. <mark>
  4. ~~<marquee>~~
  5. <menu>
  6. <menuitem>
  7. <meta>
  8. <meter>
12. N
  1. <nav>
  2. ~~<nobr>~~
  3. ~~<noframes>~~
  4. <noscript>
13. O
  1. <object>
  2. <ol>
  3. <optgroup>
  4. <option>
  5. <output>
14. P
  1. <p>
  2. <param>
  3. ~~<plaintext>~~
  4. <pre>
  5. <progress>
15. Q
  1. <q>
16. R
  1. <rp>
  2. <rt>
  3. <ruby>
17. S
  1. <s>
  2. <samp>
  3. <script>
  4. <section>
  5. <select>
  6. <shadow>
  7. <small>
  8. <source>
  9. ~~<spacer>~~
  10. <span>
  11. ~~<strike>~~
  12. <strong>
  13. <style>
  14. <sub>
  15. <summary>
  16. <sup>
18. T
  1. <table>
  2. <tbody>
  3. <td>
  4. <template>
  5. <textarea>
  6. <tfoot>
  7. <th>
  8. <thead>
  9. <time>
  10. <title>
  11. <tr>
  12. <track>
  13. ~~<tt>~~
19. U
  1. <u>
  2. <ul>
20. V
  1. <var>
  2. <video>
21. W
  1. <wbr>
22. X Y Z
  1. <xmp>