videoタグで動画を再生

videoタグを使用して動画を表示してみようと思います。
ちなみにIEはまだvideoタグに対応していないので、FirefoxかSafari、Google Chromeで見てください。

サンプル

下記、動画再生に必要な記述。

videoタグで囲っている「このブラウザでは再生できません。」はビデオが読み込まれない時に表示されます。

controls="controls"はビデオを制御するためのインターフェースを表示させます。
再生ボタンとかタイムラインとか。

autobuffer="autobuffer"はビデオのデータをオートロードします。
この属性をつけなくてもビデオ開始時にもたつかないように多少のロードはするようです。
ただし、ページ内にビデオが多数あったり、データ容量の大きいビデオがある場合は、
サーバに負荷がかかるので時と場合によって使い分ける方がいいようです。

<source src="xxxxxxx">でストリーミングサーバにあるビデオを読み込みます。

上記でも記述上の問題は無いですが、ブラウザによって読み込めるビデオ形式が決まってるようなので、
何種類か読み込めるようにしておくといいようです。
ちなみに、Safari、Google Chromeは.mp4ファイル、Firefoxは.ogvファイルが読み込めるようです。

上から順に読み込んでいき、読み込めるビデオがない場合はvideoタグ内のテキストを表示します。
画像にも対応してました。

あと、すごく初歩的なことですが、動画ファイルはストリーミングサーバに配置しないと再生されません。
ローカルのビデオで何度やっても再生されないわけだ。。