Videoタグのイベント挙動サンプル

<video id="sampleVideo" controls width="100%">
	<source src='http://nonakaryuichi.me/wp-content/uploads/2011/09/big_buck_bunny.ogv' type='video/ogg; codecs="theora, vorbis"'>
	<source src='http://nonakaryuichi.me/wp-content/uploads/2011/09/big_buck_bunny.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
	<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>
</video>

var videoConsole = function(videotag, log){
	var $video = document.getElementById(videotag);
	var $log = $(log);

	this.init = function(){
		var method = this;
		
		//console.log($video);
		
		$("#sampleVideoPlay").click(function(){
			method.play();
		});
		
		$("#sampleVideoStop").click(function(){
			method.stop();
		});
		
		$("#sampleVideoReset").click(function(){
			method.reset();
		});
		
		$("#sampleVideoVolume0").click(function(){
			method.volume(0);
		});
		
		$("#sampleVideoVolume1").click(function(){
			method.volume(1);
		});
	}
	
	this.play = function()
	{
		$video.play();
	}
	
	this.stop = function()
	{
		$video.pause();
	}
	
	this.reset = function()
	{
		$video.currentTime = 0;
	}
	
	this.volume = function(num)
	{
		$video.volume = num;
	}
	
	$video.addEventListener("emptied", function(){
		$log.prepend("<li>emptied event.</li>");
	}, false);
	
	$video.addEventListener("seeking", function(){
		$log.prepend("<li>seeking event.</li>");
	}, false);
	
	$video.addEventListener("seeked", function(){
		$log.prepend("<li>seeked event.</li>");
	}, false);
	
	$video.addEventListener("loadstart", function(){
		$log.prepend("<li>load start event.</li>");
	}, false);
	
	$video.addEventListener("progress", function(){
		$log.prepend("<li>progress event.</li>");
	}, false);
	
	$video.addEventListener("canplay", function(){
		$log.prepend("<li>can play event.</li>");
	}, false);
	
	$video.addEventListener("play", function(){
		$log.prepend("<li>play event.</li>");
	}, false);
	
	$video.addEventListener("playing", function(){
		$log.prepend("<li>playing event.</li>");
	}, false);
	
	$video.addEventListener("timeupdate", function(){
		$log.prepend("<li>timeupdate event.</li>");
	}, false);
	
	$video.addEventListener("waiting", function(){
		$log.prepend("<li>waiting event.</li>");
	}, false);
	
	$video.addEventListener("pause", function(){
		$log.prepend("<li>pause event.</li>");
	}, false);
	
	$video.addEventListener("ended", function(){
		$log.prepend("<li>ended event.</li>");
	}, false);
	
	$video.addEventListener("loadedmetadata", function(){
		$log.prepend("<li>loadedmetadata event.</li>");
	}, false);
	
	$video.addEventListener("loadeddata", function(){
		$log.prepend("<li>loadeddata event.</li>");
	}, false);
	
	$video.addEventListener("canplaythrough", function(){
		$log.prepend("<li>canplaythrough event.</li>");
	}, false);
	
	$video.addEventListener("ratechange", function(){
		$log.prepend("<li>ratechange event.</li>");
	}, false);
	
	$video.addEventListener("volumechange", function(){
		$log.prepend("<li>volume change event.</li>");
	}, false);
}

$(function(){
	var video = new videoConsole("sampleVideo", "#sampleLog");
	video.init();
});