<video> - ビデオ

• トップ
• HTMLリファレンス
• <video>

• 概要
• 説明
• 属性
• 使用例
• 詳細
  • フォーマット
  • メソッド
  • イベント
  • プロパティ
  • IE8対応
• 関連項目
• リンク

概要

形式

<video>～</video>

サポート

https://caniuse.com/video

カテゴリ

フローコンテンツ

フレージングコンテンツ

エンベデッドコンテンツ

インタラクティブコンテンツ (controls 属性を持つ場合)

パルパブルコンテンツ

親要素

エンベデッドコンテンツ を子要素に持てるもの

子要素

src 属性がある場合: 0個以上の track 要素と、それに続く トランスペアレント要素。ただし、メディア要素を子孫に持つことはできない。

src 属性がない場合: 0個以上の source 要素と、それに続く track 要素と、それに続く トランスペアレント要素。ただし、メディア要素を子孫に持つことはできない。

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

src

crossorigin

poster

preload

autoplay

playsinline (HTML Living Standard)

loop

muted

controls

width

height

説明

ビデオファイルを再生します。

<video>～</video> の間には、video 未対応のブラウザに表示するメッセージを記述することができます。

ブラウザによってサポートするコーデックやフォーマットが異なるため、<source> を用いて複数の代替フォーマットを指定することも可能です。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

autoplay

LS/H5

自動的に再生を開始します。最近のブラウザでは音を鳴らすモードでは autoplay できなくなりました。muted で音無しで再生するか、play() を用いてユーザ操作によって再生を開始する必要があります。

controls

LS/H5

コントローラを表示します。

loop

LS/H5

ループ再生します。

preload=value

LS/H5

ページ表示時にメディアリソースを事前ロードするか指定します。指定に従うかどうかはブラウザの実装にまかされます。

auto

事前ロードする

none

事前ロードしない

metadata

メタデータのみを事前ロードする

autoplayが指定された場合は無視されます。

playsinline

LS

ビデオを要素のプレイバック領域にインラインで表示します。

src=url

LS/H5

メディアリソースのURLを指定します。

height=n

LS/H5

高さを指定します。

width=n

LS/H5

横幅を指定します。

poster=url

LS/H5

ブラウザが表示可能な形式のビデオが無い場合に表示する画像ファイルのURLを指定します。

muted

LS/H5

音をミュートします。

crossorigin=state

LS/H5

CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。

anonymous

認証情報を使用しない

use-credintials

認証情報を使用する

mediagroup=name

[非推奨] H5-5

複数のメディアリソースをグルーピングする際のグループ名を指定します。HTML5 で定義されていましたが、HTML 5.1 で廃止されました。

使用例

<video src="sample.mp4" autoplay loop>
  <p>このブラウザは video に未対応です。</p>
</video>

MP4 に対応していないブラウザのために、WBEM 形式の動画も指定するには下記の様に記述します。

<video autoplay loop>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <p>このブラウザは video に未対応です。</p>
</video>

詳細

フォーマット

ビデオフォーマットには下記などがあります。よく利用されるのは MPEG-4 と WebM です。

• MPEG-4/H.264 : 最も普及しているフォーマット (サポート状況↗)
• WebM : Google が策定する新フォーマット (サポート状況↗)
• AV1 : AOMedia Video 1 (サポート状況↗)
• HEVC/H.265 : High Efficiency Vide Coding (サポート状況↗)
• Ogg/Theora : Xiph.org が策定したフォーマット (サポート状況↗)

メソッド

JavaScript から動画を一時停止、再開することができます。

<script>
function playVideo() {
  document.getElementById('video1').play();
}
function pauseVideo() {
  document.getElementById('video1').pause();
}
</script>
<video id="video1" autoplay loop>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
</video>
<input type="button" onclick="playVideo()" value="PLAY">
<input type="button" onclick="pauseVideo()" value="PAUSE">

play()

再生する。

pause()

一時停止する。

load()

src プロパティで指定したリソースをロードする。

canPlayType(type)

再生可能な形式か調べる。type には 'video/mp4; codecs="avc1.42E01E"' などを指定する。空文字列、"maybe", "probably" のいずれかが返される。

addTextTrack(king[, label[, language]])

テキストトラックを追加する。

イベント

下記の様にして、動画が再生された時、一時停止された時、終了した時などにイベントハンドラを呼び出すことができます。

const video1 = document.getElementById("video1").
video1.addEventListener("play", (e) => { console.log("Play"); });
video1.addEventListener("pause", (e) => { console.log("Pause"); });
video1.addEventListener("ended", (e) => { console.log("Ended"); });

下記のイベントをサポートしています。

play

play() などで再生を開始したとき。

pause

pause() などで一時停止したとき。

ended

再生が終わったとき。

resize

サイズが変更されたとき。

volumechange

ボリュームが変更されたとき。

loadstart

メディアデータの検索を開始したとき。

progress

メディアデータをフェッチ(取り出し)するとき。

suspend

メディアデータを意図的にフェッチしないとき。

abort

エラー以外の理由でメディアデータのダウンロードを中断したとき。

error

エラーが発生したとき。

emptied

メディア要素がエンプティ状態になったとき。(load通知時のエラーや、リソース選択時に load() が開始されたとき)

stalled

メディアデータをフェッチしようとしたが、データが取得できないとき。

loadedmetadata

メディアリソースとテキストトラックの大きさと時間を取得できたとき。

loadeddata

最初にメディアデータを表示する準備が整ったとき。

canplay

再生可能となったとき。

canplaythrough

現在のレートのままであれば最後まで途切れずに再生可能となったとき。

playing

pause またはメディアデータの欠落によりしばらく遅延した後に再開したとき。

waiting

次のフレームの準備が整わず、一時的に停止するとき。

seeking

シークを始めたとき。

seeked

シークが完了したとき。

durationchange

再生時間が変更されたとき。

timeupdate

現在の再生位置が変動したとき。

ratechange

レートが変動したとき。

プロパティ

下記の様にしてプロパティにアクセスすることができます。

currentTime = document.getElementById('#video1').currentTime;

下記のプロパティをサポートしています。

volume

音量。0.0～1.0。変更可能。

muted

ミュート(true / false)。変更可能。

currentTime

現在の再生時間(秒)。値を代入することにより、再生位置を変更することが可能。

duration

全体時間(秒)。

bufferd

バッファされた時間が TimeRange型オブジェクトで返却される。bufferd.length が要素の数を示し。bufferd.start(N), bufferd.end(N) が N 番目の開始時刻、終了時刻を示す。

played

再生された時間が、TimeRange型オブジェクトで返却される。played.length が要素の数を示し。played.start(N), played.end(N) が N 番目の開始時刻、終了時刻を示す。

seekable

シーク可能な時間が、TimeRange型オブジェクトで返却される。seekable.length が要素の数を示し。seekable.start(N), seekable.end(N) が N 番目の開始時刻、終了時刻を示す。

error

エラーオブジェクト。error が null の場合はエラー無し。null 以外の場合は error.code にエラーコードが設定される。

error.code

エラー番号。1:アボート, 2:ネットワークエラー、3:デコードエラー、4:未サポート。

currentSrc

現在のメディアリソースのURL。

networkState

ネットワークの状態。0:未設定、1:ネットワーク未使用、2:ローディング中、3:リソースが見つからない。

readyState

ロード状態。0:未ロード、1:メタデータロード済、2:現在のフレーム分のデータをロード済、3:次のフレーム分のデータをロード済、4:再生開始に十分なデータをロード済

paused

一時停止されている(true / false)。

seeking

シーク中である(true / false)。

ended

最後に達している(true / false)。

defaultPlaybackRate

デフォルトの再生レート。変更可能。

audioTracks

オーディオトラックリスト。audioTracks.length が個数、audioTracks[N] がオーディオトラックオブジェクトを返す。

videoTracks

ビデオトラックリスト。videoTracks.length が個数、videoTracks[N] がビデオトラックオブジェクトを返す。

textTracks

テキストトラックリスト。textTracks.length が個数、textTracks[N] がテキストトラックオブジェクトを返す。

controller

メディアコントローラを MediaController オブジェクトで返す。

IE8対応

下記のライブラリを読み込むことで、IE8 を <video> タグに対応させることが可能です。

<!--[if lt IE 9]>
<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>
<![endif]-->

関連項目

• <audio>
• <source>
• <track>

リンク

• https://html.spec.whatwg.org/multipage/media.html#the-video-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
• https://caniuse.com/video