search
LoginSignup
109

More than 5 years have passed since last update.

posted at

updated at

Organization

videoタグの簡単な使い方

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

準備(`Д´)

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

video.play()

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

こんな操作ができるよ

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でも使えます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
109