Help us understand the problem. What is going on with this article?

videoタグの簡単な使い方

More than 5 years have passed since last update.

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

準備(`Д´)

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

video.play()

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

こんな操作ができるよ

http://www.w3.org/wiki/HTML/Elements/video#IDL_Attributes_and_Methods

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

grapswiz
topgate
Google技術を中心に取り扱う技術者集団
https://www.topgate.co.jp/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした