この記事は公開されてから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」の転載です。