js　メディア要素　video　API

<video id="video" width="400" style="display:block;">
	<source src="bird.mp4">
</video>
<input id="play" type="button" value="再生">
<input id="pauseButton" type="button" value="一時停止">
<input id="reloadButton" type="button" value="リロード">
<div id="finished"></div>
<div>メディアデータダウンロード状況：<span id="status"></span></div>
<div>再生時間：<span id="allTime"></span>（秒）</div>
<div>再生位置：<span id="currentTime"></span>（秒）</div>

window.addEventListener('DOMContentLoaded', function() {
	videoControll();

	// ダウンロード状況取得
	status();
}, false);


function videoControll() {
	var v = document.getElementById('video');
	var playedVideo = document.getElementById('finished');

	v.addEventListener('loadedmetadata', function() {

		getDuration();
		playVideo();
		pauseVideo();
		reloadVideo();

		// イベントハンドラ確認
		eventHandler();


		// メディア要素の準備状態
		console.log(v.readyState);
		// ネットワーク状態
		console.log(v.networkState);

		function getDuration() {
			// video要素のプdurationプロパティで再生時間取得
			document.getElementById('allTime').innerHTML = v.duration;
		}

		function playVideo() {
			// 再生完了の表示をクリア
			playedVideo.innerHTML = '';

			// 再生
			var playButton = document.getElementById('play');
			play.addEventListener('click', function() {
				v.play();
				playedVideo.innerHTML = '';
			}, false);

			// 再生時刻更新（timeupdate）イベントを監視、再生位置（currentTime）取得
			v.addEventListener('timeupdate', function() {
				document.getElementById('currentTime').innerHTML = v.currentTime;
			}, false);

			// 完了通知
			v.addEventListener('ended', function() {
				playedVideo.innerHTML = '再生が完了しました。';
			}, false);

			// エラー表示
			v.addEventListener('error', function() {
				console.log('メディアリソースのエラー' + v.error);
			}, false);
		}

		function pauseVideo() {
			// 一時停止
			var pauseButton = document.getElementById('pauseButton');
			pauseButton.addEventListener('click', function() {
				v.pause();
			}, false);
		}

		function reloadVideo() {
			// リロード
			var reloadButton = document.getElementById('reloadButton');
			reloadButton.addEventListener('click', function() {
				v.load();
				playedVideo.innerHTML = '';
			}, false);
		}

		function eventHandler() {
			// 再生が開始され時に発行されるイベント
			v.onplay = function() {
				console.log('イベントハンドラ：onplay');
			};

			// 中断していた再生が再度再生可能になった時に発行されるイベント
			v.onplaying = function() {
				console.log('イベントハンドラ：onplaying');
			};

			// 現在の再生位置が変化した時に発行されるイベント
			v.ontimeupdate = function() {
				console.log('イベントハンドラ：ontimeupdate');
			};

			// 再生が中断された時に発行されるイベント
			v.onpause = function() {
				console.log('イベントハンドラ：onpause');
			};

			// メディアのデータ受信を待っている時に発行されるイベント
			v.onwaiting = function() {
				console.log('イベントハンドラ：onwaiting');
			};

			// ユーザーエージェントがメディアデータをフェッチしようとするが、データが受信出来ない時に発行されるイベント
			v.onstalled = function() {
				console.log('イベントハンドラ：onstalled');
			};

			// 再生が完了したときに発行された時に発行されるイベント
			v.onended = function() {
				console.log('イベントハンドラ：onended');
			};

			// 再生中にエラーが発生した時に発行されるイベント
			v.onerror = function() {
				console.log('イベントハンドラ：onerror');
			};

			// 再生がエラー以外の原因で停止した時に発行されるイベント
			v.onabort = function() {
				console.log('イベントハンドラ：onabort');
			};
		}
	}, false);
}

// ダウンロード状況取得
function status() {
	var v = document.getElementById('video');
	var status = document.getElementById('status');

	v.addEventListener('loadedmetadata', function() {
		status.innerHTML = 'loadedmetadata/ロード開始。';
		console.log('loadedmetadata/ロード開始');
	}, false);

	v.addEventListener('loaddata', function() {
		status.innerHTML = 'loaddata/読込完了';
		console.log('loaddata/読込完了');
	}, false);

	v.addEventListener('canplay', function() {
		status.innerHTML = 'canplay/再生可能';
		console.log('canplay/再生可能');
	}, false);

	v.addEventListener('playing', function() {
		status.innerHTML = 'playing/再生中';
		console.log('playing/再生中');
	}, false);

}