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

HTML5

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Videoタグについて調べていたのでVideoタグの挙動についてサンプルを作ってみました。属性関連もまとめました。

Videoタグとは

VideoタグはHTML5で利用可能になる新しいタグのひとつです。従来、FlashやSilverlightを利用しなければ再生できなかった動画をプラグインなしで再生できるようになります。
特に、FlashやSilverlightを利用する際にもHTML4.01、XHTMLではembedタグやobjectタグを複雑に記述しなければいけなかったのですが、Videoタグを利用することでとてもシンプルに記述することができるようになります。

Videoタグで使える主なビデオコーデック

Videoタグで使えるコーデックは主に3つあります。「Ogg Theora」「H.264」「VP8(WebM)」です。
このビデオコーデックがくせ者で、各ブラウザベンダーやその周辺の思惑で全ブラウザ共通で利用できるビデオコーデックが決まっていません。今のところはOgg TheoraとH.264かVP8とH.264のどちらかのパターンに対応しておけば大丈夫そうです。(そもそもVideoタグに対応していない場合はH.264のファイルをFlashPlayerでみられるようにするなど対応が必要です。)
コーデックについてはこちらにまとまっています。

サンプル

Videoを利用して動画を表示してみるとこんなかんじに表示されます(Videoタグに対応しているブラウザでみてね)。
Videoの再生時に発生するイベント群についても可能な範囲でまとめてみました。

イベントログ

    サンプルHTMLコード

    <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>
    

    サンプルJavaScriptコード

    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();
    });
    

    属性

    属性 内容
    src string 動画ファイルの指定(URI)
    poster string 読み込み準備中に表示する画像の指定(URI)
    width num 幅の指定
    height num 高さの指定
    autoplay true 自動再生
    false (default) 手動再生
    autobuffer true 自動でバッファを読み込む
    false (default) バッファを読み込まない
    loop true 繰り返し再生する
    false (default) 再生を1回で停止する
    controls true (default) コントロールを表示する
    false コントロールを非表示にする

    イベントハンドラ

    イベント 内容
    loadstart 読み込み開始
    progress 読み込み中
    suspend 中断
    load 読み込み
    abort 中断
    error エラー
    emptied 初期化
    stalled 失速
    play 再生開始
    pause 再生停止
    loadedmetadata メタデータの読み込み完了
    loadeddata データの読み込み完了
    waiting 待機中
    playing 再生中
    canplay 再生可能
    canplaythrough 現在の読み込み速度から途切れずに再生可能なタイミング
    seeking 捜査中
    seeked 捜査完了
    timeupdate 再生時間の変化
    ended 終わり
    ratechange 再生速度変更
    durationchange duration属性変更
    volumechange 音量変更

    イベント関連の内容は動作確認ができてない部分もあり詳しい挙動については未確認です。ごめんなさい。 もう少し詳しく調べたらまた載せたいと思います。

    この記事は「Video」の転載です。