videoタグの簡単な使い方

videoタグで出来そうなことをやってみたので簡単な使い方を書く。

準備(`Д´)

HTML

<video id="video" src="movie.mp4"></video>

JavaScript

var video = document.getElementById('video');
// もしくはjQueryを使いたい場合は
var video = $('#video').get(0);
// この変数に対して操作を行います。

video.play()

ビデオがリモートにある場合は読み込みに時間がかかるかもしれません。再生されたらおｋです。

こんな操作ができるよ

JavaScript

video.play() // ビデオを再生する
video.pause() // 一時停止する
console.log(video.currentTime) // 現在の再生時間を表示する
video.currentTime = 10 // 10秒目に移動する

また、ビデオの再生が終了したら次のビデオを再生するといったこともできます。

JavaScript

video.addEventListener('ended', function() {
    video.src = '次のビデオ.mp4';
    video.play();
}, false);

//jQueryを使う場合は
video.on('ended',function() {
    video.src = '次のビデオ.mp4';
    video.play();
});

再生終了のイベント以外にもシークされたことや再生中であること等のイベントがあります。 詳細はこちら

ビデオフォーマットの話

.oggとか.mp4とか.webmとかあります。対応してないブラウザでは表示されません。
http://en.wikipedia.org/wiki/HTML5_video#Browser_support

複数指定しておけばどれかは再生してくれるはず。

複数指定する

<video>
    <source src="video.webm" type='video/webm; video/webm; codecs="vp8, vorbis"'></source>
    <source src="video.mp4" type="video/mp4"></source>
    <source src="video.ogv" type="video/ogg"></source>
</video>

フォーマットの変換はMiro Video Converterがwindowsでもmacでも使えます。