1. grapswiz

    Posted

    grapswiz
Changes in title
+videoタグの簡単な使い方
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,63 @@
+
+[videoタグで出来そうなことをやってみた](https://dl.dropbox.com/u/388538/video-sample/index.html)ので簡単な使い方を書く。
+
+## 準備(`Д´)
+
+```HTML:HTML
+<video id="video" src="movie.mp4"></video>
+```
+
+```javascript: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:JavaScript
+video.play() // ビデオを再生する
+video.pause() // 一時停止する
+console.log(video.currentTime) // 現在の再生時間を表示する
+video.currentTime = 10 // 10秒目に移動する
+```
+
+また、ビデオの再生が終了したら次のビデオを再生するといったこともできます。
+
+```javascript:JavaScript
+video.addEventListener('ended', function() {
+ video.src = '次のビデオ.mp4';
+ video.play();
+}, false);
+
+jQuery使う場合は
+video.on('ended',function() {
+ video.src = '次のビデオ.mp4';
+ video.play();
+});
+```
+
+再生終了のイベント以外にもシークされたことや再生中であること等のイベントがあります。 [詳細はこちら](http://www.w3.org/wiki/HTML/Elements/video#Media_Events)
+
+## ビデオフォーマットの話
+.oggとか.mp4とか.webmとかあります。対応してないブラウザでは表示されません。
+http://en.wikipedia.org/wiki/HTML5_video#Browser_support
+
+複数指定しておけばどれかは再生してくれるはず。
+
+```HTML:複数指定する
+<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](http://www.mirovideoconverter.com/)がwindowsでもmacでも使えます。