JavaScriptでvideoを操作する

videoタグをJavaScriptで色々操作してみます。

対応ブラウザ

videoが対応しているブラウザはこちら。
IE8以下が非対応なので、対応が必要な場合はIE8以下ではFlashにするなどの処理が必要です。
あと、スマホでは自動再生が不可だったり、再生時の挙動が機種によって違ったりなど色々と問題が多いので、対応する場合は注意が必要です。

サンプルコード

HTML

<video id="video" width="480" height="270" controls>
	<source src="./movie.mp4" type="video/mp4" />
</video>
<div id="time">
	<span id="currentTime">0</span> / <span id="totalTime">0</span>
</div>
<div id="control">
	<button id="play">play</button>
	<button id="stop">stop</button>
	<button id="pause">pause</button>
	<button id="go">go 10s</button>
	<button id="back">back 10s</button>
	<button id="mute">mute</button>
	<button id="volup">volup</button>
	<button id="voldown">voldown</button>
	<button id="rateup">rateup</button>
	<button id="ratedown">ratedown</button>
</div>

JavaScript

// videoの取得
var video = document.getElementById('video');
// 自動再生
video.autoplay = true;
// ループ
video.loop = true;

// 再生状態になったとき
video.addEventListener('play', function() {
	console.log('再生中');
});
// 停止状態になったとき
video.addEventListener('pause', function() {
	console.log('停止中');
});

// 現在の経過時間
var currentTime = document.getElementById('currentTime');
video.addEventListener('timeupdate', function() {
	currentTime.textContent = Math.floor(video.currentTime);
});

// 動画全体の時間
var totalTime = document.getElementById('totalTime');
video.addEventListener('loadedmetadata', function() {
	totalTime.textContent = Math.floor(video.duration);
});


// playボタンを押した時
var play = document.getElementById('play');
play.addEventListener('click', function () {
	video.play();
});

// stopボタンを押した時
var stop = document.getElementById('stop');
stop.addEventListener('click', function () {
	video.pause();
	video.currentTime = 0;
});

// pauseボタンを押した時
var pause = document.getElementById('pause');
pause.addEventListener('click', function () {
	video.pause();
});

// goボタンを押した時
var go = document.getElementById('go');
go.addEventListener('click', function () {
	video.currentTime += 10;
});

// backボタンを押した時
var back = document.getElementById('back');
back.addEventListener('click', function () {
	video.currentTime -= 10;
});

// muteボタンを押した時
var mute = document.getElementById('mute');
mute.addEventListener('click', function () {
	if(video.muted){
		video.muted = false;
	}else{
		video.muted = true;
	}
});

// volupボタンを押した時
var volup = document.getElementById('volup');
volup.addEventListener('click', function () {
	video.volume  += 0.1;
});

// voldownボタンを押した時
var voldown = document.getElementById('voldown');
voldown.addEventListener('click', function () {
	video.volume  -= 0.1;
});

// rateupボタンを押した時
var rateup = document.getElementById('rateup');
rateup.addEventListener('click', function () {
	video.playbackRate = 2;
});

// ratedownボタンを押した時
var ratedown = document.getElementById('ratedown');
ratedown.addEventListener('click', function () {
	video.playbackRate = 0.5;
});

JavaScriptでvideoを操作するデモページ
　

【参考サイト】

• video要素、audio要素をJavaScriptから操作する－HTML5のAPI、および、関連仕様
• HTML5“とか”アプリ開発入門（11）：HTML5のvideo/audio＋JavaScript APIテクニック – ＠IT
• HTML5 audioタグでの音源の再生,停止,ミュート,スキップ,初期化,現在の再生時間取得などのまとめ | Stronghold
• Takazudolog – 地獄のvideo／audio要素
• iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法｜U-NOTE [ユーノート]