Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
106
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
106
Help us understand the problem. What are the problem?