<video> - ビデオ

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

概要

形式
<video>~</video>
サポート
LS / H5 / e9 / Ch1 / Fx3.5 / Sa3.1 / Op10.5
カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベデッドコンテンツ
インタラクティブコンテンツ (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
自動的に再生を開始します。
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 で廃止されました。

使用例

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

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

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

フォーマット

よく利用されるのは MPEG-4(*.mp4, *.m4v) と WEBM(*.webm) です。

IEChromeFirefoxSafariOpera
MPEG-49~31~38~8~31~
WEBM未対応31~38~未対応31~

IE8対応

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

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

メソッド

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

HTML
<script>
function playVideo() {
    document.getElementById('v1').play();
}
function pauseVideo() {
    document.getElementById('v1').pause();
}
</script>
<video id="v1" 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]])テキストトラックを追加する。

イベント

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

HTML
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
    var video = document.getElementById('v1');
    video.addEventListener("play", function() {
        alert("play");
    });
    video.addEventListener("pause", function() {
        alert("pause");
    });
    video.addEventListener("ended", function() {
        alert("ended");
    });
});
</script>
イベント名説明
playplay() などで再生を開始したとき。
pausepause() などで一時停止したとき。
ended再生が終わったとき。
resizeサイズが変更されたとき。
volumechangeボリュームが変更されたとき。
loadstartメディアデータの検索を開始したとき。
progressメディアデータをフェッチ(取り出し)するとき。
suspendメディアデータを意図的にフェッチしないとき。
abortエラー以外の理由でメディアデータのダウンロードを中断したとき。
errorエラーが発生したとき。
emptiedメディア要素がエンプティ状態になったとき。(load通知時のエラーや、リソース選択時に load() が開始されたとき)
stalledメディアデータをフェッチしようとしたが、データが取得できないとき。
loadedmetadataメディアリソースとテキストトラックの大きさと時間を取得できたとき。
loadeddata最初にメディアデータを表示する準備が整ったとき。
canplay再生可能となったとき。
canplaythrough現在のレートのままであれば最後まで途切れずに再生可能となったとき。
playingpause またはメディアデータの欠落によりしばらく遅延した後に再開したとき。
waiting次のフレームの準備が整わず、一時的に停止するとき。
seekingシークを始めたとき。
seekedシークが完了したとき。
durationchange再生時間が変更されたとき。
timeupdate現在の再生位置が変動したとき。
ratechangeレートが変動したとき。

プロパティ

下記の様にして、動画の全体時間や現在の再生時間を得ることができます。

HTML
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
    var video = document.getElementById('v1');
    document.getElementById('v1').addEventListener("timeupdate", function() {
        $('#t1').text(video.currentTime + "/" + video.duration);
    });
});
</script>
プロパティ名説明
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 オブジェクトで返す。

関連項目

<audio><source><track>

リンク


Copyright (C) 2011-2017 杜甫々
初版:2011年6月11日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/video.htm