1. grapswiz

    No comment

    grapswiz
Changes in body
Source | HTML | Preview
@@ -1,63 +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を使いたい場合は
+// もしくは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使う場合は
+//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でも使えます。