HOME / WEB関連知識のスキルアップ / HTML5のAPI、および、関連仕様 /  video要素、audio要素をJavaScriptから操作する

★video要素、audio要素をJavaScriptから操作する

■video要素、audio要素をJavaScriptから操作

HTML5では、video要素、audio要素をJavaScriptから操作するためのメソッド・プロパティ・イベントが用意されています。
これらのメソッド・プロパティ・イベントを使用することで、 JavaScriptから動画・音声などのメディアリソースの状態を参照したり、 読み込み・再生・一時停止・再生可能かどうかの確認などの操作が可能となります。
<video>タグのcontrols属性を指定すると、 再生・一時停止・再生位置の移動・ボリュームなどのインターフェースを、 ブラウザが自動で表示することになっています。 しかし、controls属性を指定せずに、これらの機能をJavaScriptで制御すれば、任意のインターフェースを独自のデザインで作成することも可能となります。 どのブラウザで表示してもインターフェースのデザインを統一させられます。

■メディアリソースへのアクセス

getElementByidメソッドを使用することで、 video要素で埋め込んだ動画ファイルなどのメディアリソースに、 JavaScriptのオブジェクトとしてアクセスすることができます。
以下のソースでは、getElementByIdメソッドでid="video"が指定されている要素を取得して、動画の長さ（秒）を参照、表示しています。
HTML + JavaScriptソース
<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要素などのメディア要素を操作するためのメソッドです。
load() …… メディアリソースを読み込む
play() …… 再生する
pause() …… 再生を一時停止する
canPlayType(MIMEタイプ) …… そのMIMEタイプが再生できる環境かどうかを判定する
video要素、audio要素をJavaScriptから操作するメソッド・属性の一覧

■メディア要素の操作に関するイベント

以下は、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
ボリューム、または、ミュートが変更された時

■video要素、audio要素をJavaScriptから操作するサンプル　ソース

HTML + JavaScriptソース
<!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>
↓​↓↓↓↓

現在（秒）：0
全体（秒）：

■video要素、audio要素をJavaScriptから操作するメソッド・属性の一覧

video要素、audio要素には、以下のメソッド・属性が用意されています。
anchor: videoelements
 video要素　The video element
video . videoWidth …… 動画の幅を返す
video . videoHeight …… 動画の高さを返す
anchor: audio
audio要素　The audio element
audio = new Audio( [ url ] ) …… 新規のaudio要素を返す
anchor: track
 track要素　The track element
track . track …… track要素からテキストトラックオブジェクトを返す
anchor: error
 エラーコード　Error codes
media . error …… エラーオブジェクトを返す
media . error . code …… エラーコード（1～4）を返す
anchor: resource
 メディアリソースの場所　Location of the media resource
media . currentSrc …… 現在のメディアリソースのURLを返す
anchor: mime
MIMEタイプ　MIME types
media . canPlayType(type) …… 指定したMIMEタイプが再生可能な場合には "maybe" または "probably" を返す
anchor: network
 ネットワークの状態　Network states
media . networkState …… ネットワークの状態をコード（0～3）で返す
anchor: roading
 メディアリソースの読み込み　Loading the media resource
media . load() …… メディアリソースを読み込む
media . buffered …… メディアリソースのバッファー処理がどこまで完了しているかを時間範囲で返す
anchor: offsets
 メディアリソースの長さ　Offsets into the media resource
media . readyState …… メディア要素の現在の状態を返す
anchor: states
 準備状態　The ready states
media . readyState …… メディア要素の現在の状態を返す
anchor: resource
 メディアリソースの再生　Playing the media resource
media . paused …… 一時停止していれば true それ以外なら false を返す
media . ended …… メディアリソースの最後まで再生していれば true を返す
media . defaultPlaybackRate [ = value ] …… デフォルトの再生レートを返す・設定する
media . playbackRate [ = value ] …… 再生レートを返す・設定する（標準速度は1.0）
media . played …… どこまで再生完了したのかを時間範囲で返す
media . play() …… 再生する
media . pause() …… 再生を一時停止する
anchor: seeking
 シーク（再生位置への移動）　Seeking
media . seeking …… シーク中の場合にはtrueを返す
media . seekable …… どこまでシーク可能かを時間範囲で返す
anchor: multiple
多重トラック　Media resources with multiple media tracks
media . audioTracks …… 利用可能なオーディオトラックのリストを返す
media . videoTracks …… 利用可能なビデオトラックのリストを返す
anchor: trackList
トラックリスト　TrackList objects
tracks . length …… トラックの個数を返す
id = tracks . getID( index ) …… 指定トラックのIDを返す
kind = tracks . getKind( index ) …… 指定トラックの属するカテゴリを返す（"alternative", "description", "main", "sign","translation", 空文字）
label = tracks . getLabel( index ) …… 指定トラックに付けられたラベルを返す
language = tracks . getLanguage( index ) …… 指定トラックの言語を返す
enabled = audioTracks . isEnabled( index ) …… 指定トラックがアクティブならtrue それ以外なら falseを返す
audioTracks . enable( index ) …… 指定トラックを有効にする
audioTracks . disable( index ) …… 指定トラックを無効にする
videoTracks . isEnabled …… 選択中のトラックの番号を返す
videoTracks . select( index ) …… 指定トラックを選択する
anchor: controllers
 コントローラー　Media controllers
controller = new MediaController() …… 新規のMediaControllerオブジェクトを返す
media . controller [ = controller ] …… メディア要素のMediaControllerを返す・設定する
controller . buffered ……
controller . seekable ……
controller . duration …… 再生時間の長さ（秒）
controller . currentTime [ = value ] ……
controller . paused ……
controller . played …… 再生済みの時間範囲（TimeRanges型）
controller . play() …… 再生する
controller . pause() …… 一時停止する
controller . defaultPlaybackRate [ = value ] ……
controller . playbackRate [ = value ] ……
controller . volume [ = value ] ……
controller . muted [ = value ] ……
anchor: api
テキストトラックAPI　Text track API
media . textTracks . length ……
media . textTracks[ n ] ……
track . track ……
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() ……
anchor: interface
ユーザーインターフェース　User interface
media . volume [ = value ] …… 現在の再生ボリュームを返す・設定する（0.0～1.0）
media . muted [ = value ] …… ミュート中の場合には true を返す・ミュートを切り替える
anchor: time
 タイムレンジ　Time ranges
media . length …… オブジェクト内のタイムレンジの個数を返す
time = media . start(index) …… 指定タイムレンジの開始時間を返す
time = media . end(index) …… 指定タイムレンジの終了時間を返す