トップページ  > HTML5のAPI、および、関連仕様  > video要素、audio要素をJavaScriptから操作する

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

video要素、audio要素をJavaScriptから操作する
Internet Explorer9 Firefox3Firefox4 Google Chrome5Google Chrome6 Safari5 Opera10
広告

※このページでは、video要素、audio要素をJavaScriptから操作する方法について紹介しています。 単純に<video>タグや<audio>タグの使い方を知りたい方は、 以下のページなどをご確認ください。
<video>タグで動画を埋め込む
<video> …… 動画を再生するHTML5から追加
<audio> …… 音声を再生するHTML5から追加

■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>
サンプルを別画面で開く

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

video要素、audio要素には、以下のメソッド・属性が用意されています。


 video要素 The video element

video . videoWidth …… 動画の幅を返す
video . videoHeight …… 動画の高さを返す

 audio要素 The audio element

audio = new Audio( [ url ] ) …… 新規のaudio要素を返す

 track要素 The track element

track . track …… track要素からテキストトラックオブジェクトを返す

 エラーコード Error codes

media . error …… エラーオブジェクトを返す
media . error . code …… エラーコード(1~4)を返す

 メディアリソースの場所 Location of the media resource

media . currentSrc …… 現在のメディアリソースのURLを返す

 MIMEタイプ MIME types

media . canPlayType(type) …… 指定したMIMEタイプが再生可能な場合には "maybe" または "probably" を返す

 ネットワークの状態 Network states

media . networkState …… ネットワークの状態をコード(0~3)で返す

 メディアリソースの読み込み Loading the media resource

media . load() …… メディアリソースを読み込む
media . buffered …… メディアリソースのバッファー処理がどこまで完了しているかを時間範囲で返す

 メディアリソースの長さ Offsets into the media resource

media . duration …… 再生時間の長さ(秒)を返す
media . currentTime [ = value ] …… 現在の再生位置(秒)を返す・設定する
media . initialTime …… 初期再生位置を返す

 準備状態 The ready states

media . readyState …… メディア要素の現在の状態を返す

 メディアリソースの再生 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() …… 再生を一時停止する

 シーク(再生位置への移動) Seeking

media . seeking …… シーク中の場合にはtrueを返す
media . seekable …… どこまでシーク可能かを時間範囲で返す

 多重トラック Media resources with multiple media tracks

media . audioTracks …… 利用可能なオーディオトラックのリストを返す
media . videoTracks …… 利用可能なビデオトラックのリストを返す

 トラックリスト 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 ) …… 指定トラックを選択する

 コントローラー 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 ] ……

 テキストトラック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() ……

 ユーザーインターフェース User interface

media . volume [ = value ] …… 現在の再生ボリュームを返す・設定する(0.0~1.0)
media . muted [ = value ] …… ミュート中の場合には true を返す・ミュートを切り替える

 タイムレンジ Time ranges

media . length …… オブジェクト内のタイムレンジの個数を返す
time = media . start(index) …… 指定タイムレンジの開始時間を返す
time = media . end(index) …… 指定タイムレンジの終了時間を返す
<前へ 記事一覧へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ