Javascriptからビデオ要素にアクセスする

video要素にJavascriptからアクセスするには、「getElementById」を使用します。
getElementByIdで得られたvideo要素に対し、以下のものを使ってアクセスすることが可能です。


メソッド一覧

メソッド	意味
load()	ファイルの読み込みを行う
play()	ファイルの再生を行う
pause()	ファイルの再生の一時停止を行う
canPlayType(MIMEタイプ)	指定MIMEタイプが再生可能か判断する maybe:再生可能

プロパティ一覧

プロパティ	意味
currentSrc	現在再生しているファイルのURL。参照のみ
duration	再生時間の長さ（秒）。参照のみ
ended	再生が終了したかどうか true:再生終了。参照のみ
error	エラー時のエラーコード。参照のみ
played	再生済みの時間範囲（TimeRanges型）。参照のみ
seekable	シーク可能な時間範囲（TimeRanges型）。参照のみ
seeking	指定された再生位置に移動中 true:シーク中。参照のみ
startTime	再生開始位置（秒数）。参照のみ
src	動画ファイルのURL
readyState	メディアのダウンロード状態
currentTime	現在の再生位置（秒）
defaultPlaybackRate	デフォルトの再生速度。デフォルトは1.0
playbackRate	再生速度。デフォルトは1.0。巻き戻しはマイナス値
preload	preload属性。 auto:自動読み込み有効 metadata:メタデータのみ none:自動読み込み無し
loop	繰り返し再生をするか
controls	コントロールを表示するか
volume	音声のボリューム。0.0〜1.0
muted	ミュートするか。 true:ミュート

イベント一覧

イベント	発生条件
loadstart	メディアデータのロード開始
progress	メディアデータの読み込み中
suspend	サスペンドした
abort	中断された
error	エラーが発生した
emptied	メディアデータが空
stalled	中断した
play	再生開始
pause	再生停止
load	メディアのダウンロード完了
loadedmetadata	メタデータのダウンロード完了
loadeddata	データの読み込みが完了
waiting	待機中
playing	再生中
canplay	再生可能
canplaythrough	最後まで再生可能
seeking	シーク中
seeked	シーク終了
timeupdate	再生中は１秒間隔で発生
ended	再生終了
ratechange	再生速度が変更された
durationchange	再生時間が変更された
volumechange	音量が変更された

下の例は、ビデオを再生中にtimeupdateイベントを補足して時間と再生率を表示する例です。

---

---

---

<video height="300" id="playMovie" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrN7GoVUmc8GWwlCrypw4f2ZMFCMZCQJvAKGxFIa9wOqK_ECXHs-Zo2sI5otcUc07B6PTudt60HymlNn6UJeHVh9M1wyagAzFO3fjpphPCDWsapTAxssPY5rBUuYHNwIV2fVcAlmcCTAQR/s1600/_Sunflower.gif" preload="auto" width="400">
<source src="https://docs.google.com/uc?id=0B_-pW_pm0gmnOTQxMDlkYzUtNjk0OS00OGM3LWI4ODAtZWM3Y2Y5YzZkMTYx&amp;export=download&amp;hl=en_US" type="video/mp4; codecs='avc1.42E01E,mp4a.40.2'"></source>
<source src="OGG用ファイルのURL.ogg" type="video/ogg; codecs='theora, vorbis'"></source>
<object data="player.swf" type="application/x-shockwave-flash"> <param name="movie" value="フラッシュ用ファイルのURL.swf">
</object>
</video>

<input onclick="startVideo()" type="button" value="再生" />
<span id="progress" name="progress"></span>
<script type="text/javascript">
var v = document.getElementById("playMovie");
function startVideo() {
 v.play();
 v.addEventListener("timeupdate", fire, false);
}
function fire() {
 var prg = document.getElementById("progress");
 var rate = Math.floor(v.currentTime) / Math.floor(v.duration) * 100;
 rate = Math.round(rate);
 prg.innerHTML = Math.floor(v.currentTime) + "/" + Math.floor(v.duration) + "  " + rate + "%";
}
</script>

---