Diary

HTML5のvideoタグの使用方法

By 8月 19th, 2014 No Comments

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

Kunitaka Kawashimo

Kunitaka Kawashimo

アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン/Webデザイン/撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp