<video> - ビデオ

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

概要

項目説明
形式<video>~</video>
サポートH5 / e9 / Ch1 / Fx3.5 / Sa3.1 / Op10.5
カテゴリフローコンテンツ, フレージングコンテンツ, エンベデッドコンテンツ,
インタラクティブコンテンツ(controls属性を持つ場合), パルパブルコンテンツ
親要素エンベデッドコンテンツ を子要素に持てるもの
子要素0個以上の source要素(src属性無しの場合のみ)と、それに続く 0個以上の track要素と、
それに続く トランスペアレントな要素(ただし、audio, vidao要素を子孫に持つことはできない)
タグの省略開始タグ:必須 / 終了タグ:必須

説明

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

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

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

属性

【個別属性】
属性意味
autoplayH5。自動的に再生を開始します。
controlsH5。コントローラを表示します。
loopH5。ループ再生します。
mediagroup=nameH5。複数のメディアリソースをグルーピングする際のグループ名を指定します。
preload=valueH5。ページ表示時にメディアリソースを事前ロードするか指定します。指定に従うかどうかはブラウザの実装にまかされます。
 auto:事前ロードする
 none:事前ロードしない
 metadata:メタデータのみを事前ロードする
autoplayが指定された場合は無視されます。
src=urlH5。メディアリソースのURLを指定します。
height=nH5。高さを指定します。
width=nH5。横幅を指定します。
poster=urlH5。ブラウザが表示可能な形式のビデオが無い場合に表示する画像ファイルのURLを指定します。
mutedH5。音をミュートします。
crossorigin=stateH5。CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
 anonymous:認証情報を使用しない
 use-credintials:認証情報を使用する
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

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-2015 杜甫々
初版:2011年6月11日 最終更新:2015年9月27日
http://www.tohoho-web.com/html/video.htm