ときどきWEBときどきWEB検索2013530PC各ブラウザ・スマホ・タブレットごとの動画形式についてまとめてやんよ!!!html5css3%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e3%82%b5%e3%82%a4%e3%83%88%e9%96%a2%e4%bf%82TweetPocket動画コンテンツを制作するにあたってこれまでPCではFlash、スマホはMP4で設置しとけば何とかなる感がありますが、レスポンシブデザインサイトで制作する事を想定した場合、動画形式についてもブラウザ間の仕様やキャリア端末毎の問題点や把握すべき点がありそうだったので調査してみますた。<video>タグについてwebサイトにて動画コンテンツを設置する際は、HTML5で新たに追加された<video>タグを使用する。これにより、Flash無しで動画が再生可能となる。Touchなど、Flashに対応していない端末で動画コンテンツを利用する際は、<video>タグだけが動画コンテンツに対応させられる唯一の方法となる。codecs="動画データ(MINEタイプやコーデック)"'>動画を再生するには、videoタグをサポートしたブラウザが必要です。動画の容量が大きい場合、ページをロードしてから再生させるまでにタイムラグが生じる事への対処としてページのロード時に動画をあらかじめ読み込ませる指定ができる。('14/3月更新)PC用の各ブラウザと主要動画形式のMP4・WebM・OGVの3種の再生可能かを実記検証した結果がこちら。各ブラウザの<video>タグ対応可能バージョンは以下のとおり。iPad)にて各動画形式の実機動作検証の結果です。上記検証の結果から各ブラウザに対応させる為にはMP4形式とWebM形式を用意しておけば、記事投稿時(2013年5月)現在の主要端末・主要ブラウザの動画コンテンツに対応できるWebM形式の代わりにOGV形式動画を用いても良いが、OGVファイルは要領が大きくなるため、WebMファイルを優先させる方が好ましいと思います。エンコードの際に動画にメタデータを含ませると、端末によって再生できない場合や再生開始までに時間がかかる場合があるため、用意すべき動画にはメタデータを含ませない物が好ましいと思います。上記で述べたようにIE6~8をはじめとするHTML5タグへの基準が十分ではないブラウザでは<video>タグ自体が対応していないため、別個スクリプトの実装が必要となる。html5media(https://github.com/etianen/html5media)html5mediaのjsファイルを読み込ませる事でvideo要素やaudio要素をサポートしていないブラウザでも表示対応させる事ができる。Vorbis)を追加させなければ動画を再生する事ができないため.htaccessに下記の記述をする事で対応させる。mp4形式での再生ができない場合またmp4形式もIE9ではローカルでは見れるがサーバーにアップすると見れなくなるという場合は、こちらも.htaccessでの指定が必要となる。.mp4動画周りもレスポンシブデザインに対応させる場合はページ容量と処理の負担を極力減らさなければならないので、今後も調査していこうと思います。