■動画の形式について
H.264(mp4)と Ogg Theora(ogv)を抑えておけば全ブラウザで表示できる。
Google等によるWebM(webm)押しの状況を見ているとやはり三つ対応しておくのが無難かもしれない。
参考
http://www.aoharu-b.com/cgi/sk/2011/09/html55video.html
その際、MIMEタイプの記述も忘れずに。
■記述方法について
最新ブラウザではvideoタグが使えるが、まだまだ対応していないブラウザも多い。(IE8以前など)
プラグインを使い、videoタグに対応しないブラウザではflashで再生させる仕様にしたほうがいい。
mediaelementjs
http://mediaelementjs.com/
日本語での紹介いろいろ
http://blog.alt-scape.com/archives/415
http://news.mynavi.jp/articles/2010/09/28/html5-video-and-mediaelementjs/index.html
http://www.inazumatv.com/contents/archives/6181
http://www.advertimes.com/adobata/article/7281/tadashiku.jp/2012/05/14/html5-video%E3%82%BF%E3%82%B0%E3%82%92%E6%B4%BB%E3%81%8B%E3%81%97%E3%81%9F%E3%80%81%E3%83%95%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%81%AE%E5%8B%95%E7%94%BB%E5%86%8D%E7%94%9F%E3%82%B5/
これを使えば、mp4しか用意していなくても多くのブラウザでの再生が可能になる。
以下記述例
<video id="movie" width="410" height="270" poster="img/movie_thumb_big.png" preload="auto" controls="controls"> <source src="movie/cm30pc.mp4" type='video/mp4'> <!-- Flash fallback for non-HTML5 browsers without JavaScript --> <object width="410" height="270" type="application/x-shockwave-flash" data="build/flashmediaelement.swf"> <param name="movie" value="build/flashmediaelement.swf" /> <param name="flashvars" value="controls=true&poster=img/movie_thumb_big.png&file=movie/cm30pc.mp4" /> <!-- Image as a last resort --> <img src="img/movie_thumb_big.png" width="410" height="270" title="No video playback capabilities" /> </object> <script> // using jQuery $('video').mediaelementplayer({ // useful for <audio> player loops features: ['playpause','progress','volume','postroll'] }); </script>
■テストブラウザ(Windws7にて)
IE6(IEtester)>>Flashでの再生OK
IE7,8 (開発者ツール)>>Flashでの再生OK
IE9>>videoタグでの再生OK
firefox(18.0.2)>>videoタグでの再生OK
chorome(24.0.1312.57 m)>>videoタグでの再生OK
safari(5.1.7)videoタグでの再生OK
■不都合?
IE9の一部の環境で不都合報告がある。大丈夫かな。
http://d.hatena.ne.jp/ke_takahashi/20120810/1344593098