HTML辞典 video要素、audio要素、track要素、source要素の解説

動画を埋め込む<video>タグの解説、音声を埋め込む<audio>タグ、video要素やaudio要素のトラック情報を指定する<track>タグ、video要素、audio要素、picture要素で複数の外部リソースを指定する<source>タグの使用法を掲載

HTML5

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

要素カテゴリーコンテンツモデル
video要素
  • インタラクティブコンテンツ(controls属性を持つ場合)
  • エンベッディッドコンテンツ
  • パルパブルコンテンツ
  • フレージングコンテンツ
  • フローコンテンツ

トランスペアレントコンテンツ

  • src属性を持つ場合は、0個以上のtrack要素に続きトランスペアレントコンテンツ。
  • src属性を持たない場合は、0個以上のsource要素、0個以上のtrack要素に続き
  • トランスペアレントコンテンツ。つまり、audio要素の開始・終了タグ、及び
  • source要素、track要素を削除した場合でも、コンテンツモデル的に妥当となる内容であれば
  • 内包可。ただし、子孫要素にほかのaudio要素や、video要素を含むことは不可。
audio要素
  • インタラクティブコンテンツ(controls属性を持つ場合)
  • エンベッディッドコンテンツ
  • パルパブルコンテンツ(controls属性を持つ場合)
  • フレージングコンテンツ
  • フローコンテンツ
track要素なし

source要素

グローバル属性

HTML共通で指定できるグローバル属性について

source要素 書式・概要

<source 属性="属性値">~</source>

source要素は、audio要素、video要素、picture要素に対して、選択可能なファイルを複数指定します。複数のファイルを用意することで閲覧者の環境に合わせて適切なファイルが選択されます。

また、source要素は、sizes属性を使用することでイメージソースを出し分けられます。

使用できる属性

src

文書内に埋め込む音声ファイルのURLを指定します。

<source src="sample.mp3">~</source>

srcset

複数のイメージソースを指定して、ディスプレイサイズやデバイスピクセル比に応じて代替え画像を出力します。候補となる画像のURLに合わせて、表示する条件を半角スペースで区切って指定します。各条件は数値に画像の幅「w」、高さ「h」、デバイスピクセル比「x」の単位を付けて任意に指定します。また、画像の候補はカンマ(,)で区切って複数個を指定できます。

単位説明
w「768w」のようにディスプレイ幅を条件に指定する
h「800h」のようにディスプレイ高さで条件を指定する
x「2x」のようにディスプレイ比の倍率で条件を指定する

type

リンク先のMIMEタイプ

media

リンク先の文書や読み込む外部リソースがどのメディアに適合するのか指定します。media属性の値は妥当なメディアクエリである必要があります。

audio要素 書式・概要

<audio 属性="属性値">~</audio>

audio要素は、文書内に音声ファイルを埋め込みます。プラグインを必要とせずブラウザの機能のみで再生することができます。

使用できる属性

src

文書内に埋め込む音声ファイルのURLを指定します。

<audio src="sample.mp3">~</audio>

crossorigin

CORS(Cross-Origin Resource Sharing クロスドメイン通信)を設定できる属性です。サードパーティーから読み込んだ画像を、canvas要素で利用できるようになります。

anonymousCookieやクライアントサイドのSSL証明書、HTTP認証などの
ユーザー認証情報は不要です。
use-credentialsユーザー認証情報を求めます。

preload

再生するファイルを事前に読み込んでおくかを指定します。この属性はブラウザによって挙動が異なるため意図通り動作するかは不明です。

none事前に何も読み込まない
metadata音声ファイルのサイズの長さなどのメタデータを読み込んでおく
auto音声ファイル全体を読み込んでおく

autoplay

【論理属性】

読み込んだファイルを自動的に再生します。

mediagroup

音声・動画ファイルのグループ名を指定します。同一文書内で、同じmediagroup属性値を持つ、video要素やaudio要素はグループとして扱われ、連続再生などが可能になります。

loop

【論理属性】

エンドレス再生を行うように指定します。

muted

【論理属性】

ミュートした状態で再生ます。

controls

【論理属性】

音声ファイルの再生をコントロールするインタフェースを表示させます。

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>audioタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <audio src="sample.mp3" controls>
      </audio>
  </body>
</html>

chromeブラウザ実行結果


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera

複数の形式を指定する方法

音声データはブラウザによって対応フォーマットが異なるので、複数のフォーマットデータを準備しておき対応しているものを再生できるようにsource要素が容易されています。source要素を使用する場合は、audio要素のsrc属性は使用できません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>audioタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <audio controls>
          <source src="sample.aac" type="audio/aac">
          <source src="sample.mp3" type="audio/mpeg">
      </audio>
  </body>
</html>

video要素 書式・概要

<video 属性="属性値">~</video>

video要素は、文書内に動画ファイルを埋め込みます。プラグインを必要とせずブラウザの機能のみで再生することができます。

使用できる属性

src

文書内に埋め込む音声ファイルのURLを指定します。

<video src="sample.mp3">~</video>

crossorigin

CORS(Cross-Origin Resource Sharing クロスドメイン通信)を設定できる属性です。サードパーティーから読み込んだ画像を、canvas要素で利用できるようになります。

anonymousCookieやクライアントサイドのSSL証明書、HTTP認証などの
ユーザー認証情報は不要です。
use-credentialsユーザー認証情報を求めます。

preload

再生するファイルを事前に読み込んでおくかを指定します。この属性はブラウザによって挙動が異なるため意図通り動作するかは不明です。

none事前に何も読み込まない
metadata動画ファイルのサイズの長さなどのメタデータを読み込んでおく
auto動画ファイル全体を読み込んでおく

poster(ポスター)

動画を再生できない場合や再生の準備が整うまでの間に表示する画像のURLを指定します。

mediagroup

音声・動画ファイルのグループ名を指定します。同一文書内で、同じmediagroup属性値を持つ、video要素やaudio要素はグループとして扱われ、連続再生などが可能になります。

loop

【論理属性】

エンドレス再生を行うように指定します。

muted

【論理属性】

ミュートした状態で再生ます。

controls

【論理属性】

動画ファイルの再生をコントロールするインタフェースを表示させます。

width

動画ファイルの幅をピクセルで指定します。値には正の整数を指定します。

height

動画ファイルの高さをピクセルで指定します。値には正の整数を指定します。

使用方法

firefox以外のブラウザでは、posterで指定した画像ファイルで表示するが、firefoxに関しては、動画サイズで表示する。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>video タグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <video src="videosample.mp4" controls poster="videosample.jpg">
      </video >
  </body>
</html>

chromeブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera

複数の形式を指定する方法

動画データはブラウザによって対応フォーマットが異なるので、複数のフォーマットデータを準備しておき対応しているものを再生できるようにsource要素が容易されています。source要素を使用する場合は、video要素のsrc属性は使用できません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>videoタグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <audio controls width="400" height="300">
          <source src="video_sample.webm" type="video/webm">
          <source src="video_sample.mp4" type="video/mp4">
      </audio>
  </body>
</html>

track要素 書式・概要

<track 属性="属性値">

track要素は、音声・動画ファイルのトラック情報(字幕、キャプション、チャプターなど)を指定することができます。トラックファイルはWebVTT(.vtt)で作る必要があります。

WebVTTファイルの作成

1行目に「WEBVTT」と記述し、空白行を記述します。次の行から「HH:MM:SS.000 –> HH:MM:SS.000」の形式でデータの表示時間を指定し、改行後に表示するテキストを記述します。ファイルは*.vttという形式で保存します。

WEBVTT
00:00:00.200 -- > 00:00:03.000
オープニング
00:00:00.300 -- > 00:00:06.000
動画始まっています。

使用できる属性

kind

テキストトラックの種類を指定します。

subtitles外国語の字幕を表します。(初期値)
captions音声が利用できない場合に対するテキストトラックを表します。
descriptions動画の内容をテキストで説明したものを表します。
chaptersチャプター(場面)のタイトルを表します。
metadataクライアントサイドスクリプトから利用する目的のテキストトラックを
表します。このテキストトラックは画面に表示されません。

src

動画に埋め込むテキストトラックのURLを指定します。

srclang

テキストトラックの言語を指定します。指定できる値はlang属性と同様です。kind属性の値がsubtitlesの場合、この属性による言語の指定は必須です。

ja日本語
en英語
ko韓国語
zh中国語
zh-cn中国語(簡体)
zh-tw中国語(繋体)

label

閲覧者に表示するコマンドやテキストトラックのラベルを指定します。

default

デフォルトのテキストトラックであることを表します。1つのaudio、video要素内に、この属性が指定されたテキストトラックは複数存在してはいけません。

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>video タグ サンプルページ</title>
    <meta charset="uft-8"><!-- 文字コード指定 -->
  </head>
  <body>
      <video src="videosample.mp4" controls poster="videosample.jpg">
          <track kind="subtitles" src="sample.jp.vvt" srclang="ja" label="日本語" default="default">
          <track kind="subtitles" src="sample.en.vvt" srclang="en" label="English" >
      </video >
  </body>
</html>