HTML5のvideoタグの使用方法
HTML5のvideoタグは、以下のように記述します。
<video id="movie01" autoplay loop poster="img/pic01.jpg" width="1920" height="1080">
<source src="movie/movie01.mp4">
<source src="movie/movie01.ogv">
<source src="movie/movie01.webm">
<p>このブラウザではビデオを再生できません。</p>
</video>
Safari, Firefox用にogvファイルを用意し、念のためwebmも用意します。
mp4のファイルサイズ軽減、およびogv, webmへの変換には、
Miro Video Converterを使います。
MP4: MP4
Theora: ogv
WebM(vp8): webm
ただ現状の最新バージョン3.0でogvを書き出すと、かなり画質が荒くなってしまうため、
以前のバージョン2.6を以下からダウンロードして使用します。
http://www.digital-digest.com/software/Miro_Video_Converter_history.html
IE9/10で再生されない場合があるため、.htaccessに以下を記述し、動画ファイルであることをサーバに認識させます。
AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm
IE6,7,8でもvideoタグを有効にするには、html5media.min.jsを使います。
http://html5media.info/
html5media