※このページでは、video要素、audio要素をJavaScriptから操作する方法について紹介しています。
単純に<video>タグや<audio>タグの使い方を知りたい方は、
以下のページなどをご確認ください。
<video>タグで動画を埋め込む
<video> …… 動画を再生する
<audio> …… 音声を再生する
HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。
これらのメソッド・プロパティ・イベントを使用することで、
JavaScriptから動画・音声などのメディアリソースの状態を参照したり、
読み込み・再生・一時停止・再生可能かどうかの確認などの操作が可能となります。
<video>タグのcontrols属性を指定すると、
再生・一時停止・再生位置の移動・ボリュームなどのインターフェースを、
ブラウザが自動で表示することになっています。
しかし、controls属性を指定せずに、これらの機能をJavaScriptで制御すれば、任意のインターフェースを独自のデザインで作成することも可能となります。
どのブラウザで表示してもインターフェースのデザインを統一させられます。
getElementByidメソッドを使用することで、
video要素で埋め込んだ動画ファイルなどのメディアリソースに、
JavaScriptのオブジェクトとしてアクセスすることができます。
以下のソースでは、getElementByIdメソッドでid=”video”が指定されている要素を取得して、動画の長さ（秒）を参照、表示しています。
<script type="text/javascript">
var v = document.getElementById("video");
document.getElementById("nagasa").innerHTML = v.duration;
</script>
<video id="video" width="400" height="300">
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
</video>
<p id="nagasa"></p>
以下は、video要素、audio要素などのメディア要素を操作するためのメソッドです。
以下は、video要素、audio要素などのメディア要素の操作に関するイベントです。
| イベント名 | イベントが発生するタイミング |
|---|---|
| loadstart | メディアデータの読み込みを開始した時 |
| progress | メディアデータの読み込み中の時 |
| suspend | メディアリソース全体は読み込めていないが、読み込みを一時休止している時 |
| abort | メディアリソースの読み込みが完了する前に、エラーが原因ではなく読み込みを中断した時 |
| error | メディアデータの読み込み中にエラーが発生した時 |
| emptied | 読み込みエラーなどの理由で、読み込みデータが空となった時 |
| stalled | メディアデータを読み込もうとしているが、予期しない理由で読み込めない時 |
| loadedmetadata | メタデータの読み込みが完了して、メディアリソースの長さと大きさが決まってテキストトラックの準備が出来た時 |
| loadeddata | メディアデータを現在の再生位置で描画できる状態になった初回の時 |
| canplay | メディアデータの再生を再開することができるが、 いま再生を再開すれば、現在の再生レートで最後まで再生できず、途中でバッファリングのために停止すると推定される時 |
| canplaythrough | いま再生を再開すれば、現在の再生レートで最後まで再生できて、途中でバッファリングのために停止することはないと推定される時 |
| playing | 一時停止した後、または、メディアデータの不足で遅延した後で、再生を再開する準備ができた時 |
| waiting | 次のフレームが利用できないため再生停止しているが、やがてそのフレームが利用できるようになるのを待っている時 |
| seeking | シーク（再生位置への移動）中の時 |
| seeked | シーク（再生位置への移動）が完了した時 |
| ended | メディアリソースの末尾に達して、再生が停止した時 |
| durationchange | duration属性（メディアリソースの長さ、再生継続時間）が更新された時 |
| timeupdate | 現在の再生位置が変更された時 |
| play | 再生中の時 |
| pause | 一時停止中の時 |
| ratechange | 再生レートが変更された時 |
| volumechange | ボリューム、または、ミュートが変更された時 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<title>video要素、audio要素をJavaScriptから操作する サンプル</title>
</head>
<body onLoad="getDuration()">
<video id="video" width="400" height="300">
<source src="sample.mp4">
<source src="sample.ogv">
<source src="sample.webm">
</video>
<div style="width:400px; background-color:#333333; color:#ffffff;">
<input type="button" value="再生" onClick="playVideo()">
<input type="button" value="一時停止" onClick="pauseVideo()">
<input type="button" value="↑" onClick="upVolume()">
<input type="button" value="↓" onClick="downVolume()"><br>
現在（秒）：<span id="ichi">0</span><br>
全体（秒）：<span id="nagasa"></span><br>
<span id="kanryou"></span>
</div>
<script type="text/javascript">
var v = document.getElementById("video");
function getDuration() {
//動画の長さ（秒）を表示
document.getElementById("nagasa").innerHTML = v.duration;
}
function playVideo() {
//再生完了の表示をクリア
document.getElementById("kanryou").innerHTML = "";
//動画を再生
v.play();
//現在の再生位置（秒）を表示
v.addEventListener("timeupdate", function(){
document.getElementById("ichi").innerHTML = v.currentTime;
}, false);
//再生完了を知らせる
v.addEventListener("ended", function(){
document.getElementById("kanryou").innerHTML = "動画の再生が完了しました。";
}, false);
}
function pauseVideo() {
//動画を一時停止
v.pause();
}
function upVolume() {
//音量を上げる
v.volume = v.volume + 0.25;
}
function downVolume() {
//音量を下げる
v.volume = v.volume - 0.25;
}
</script>
</body>
</html>video要素、audio要素には、以下のメソッド・属性が用意されています。
| video要素 | audio要素 | track要素 |
|---|---|---|
| エラーコード | メディアリソースの場所 | MIMEタイプ |
| ネットワークの状態 | メディアリソースの読み込み | メディアリソースの長さ |
| 準備状態 | メディアリソースの再生 | シーク |
| 多重トラック | トラックリスト | コントローラー |
| テキストトラックAPI | ユーザーインターフェース | タイムレンジ |
textTrack . kind ……
textTrack . label ……
textTrack . language ……
textTrack . readyState ……
textTrack . mode ……
textTrack . cues ……
textTrack . activeCues ……
mutableTextTrack = media . addTextTrack( kind [, label [, language ] ] ) ……
mutableTextTrack . addCue( cue ) ……
mutableTextTrack . removeCue( cue ) ……
cuelist . length ……
cuelist[index] ……
cuelist . getCueById( id ) ……
cue . track ……
cue . id ……
cue . startTime …… 再生可能な位置（秒）
cue . endTime ……
cue . pauseOnExit ……
source = cue . getCueAsSource() ……
fragment = cue . getCueAsHTML() ……
| 記事一覧へ | 次へ> |