ビデオファイルを再生します。
<video>~</video> の間には、video未対応のブラウザに表示するメッセージを記述することができます。
ブラウザによってサポートするコーデックやフォーマットが異なるため、<source> を用いて複数のフォーマットを指定することも可能です。
<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(*.mp4, *.m4v) と WEBM(*.webm) です。
IE | Chrome | Firefox | Safari | Opera | |
---|---|---|---|---|---|
MPEG-4 | 9~ | 31~ | 38~ | 8~ | 31~ |
WEBM | 未対応 | 31~ | 38~ | 未対応 | 31~ |
下記のライブラリを読み込むことで、IE8 を <video> タグに対応させることが可能です。
<!--[if lt IE 9]> <script src="http://api.html5media.info/1.1.8/html5media.min.js"></script> <![endif]-->
JavaScript から動画を一時停止、再開することができます。
<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]]) | テキストトラックを追加する。 |
下記の様にして、動画が再生された時、一時停止された時、終了した時などにイベントハンドラを呼び出すことができます。
<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>
イベント名 | 説明 |
---|---|
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 | レートが変動したとき。 |
下記の様にして、動画の全体時間や現在の再生時間を得ることができます。
<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 オブジェクトで返す。 |