Tweet

Pocket

videoで指定した動画ファイルが、ブラウザによっては未対応の場合もあるので、その為の対応をご紹介します。

様々なブラウザ対応の為、source要素を使って複数の圧縮形式の動画ファイルを指定します。

【使用例】

<video width="300" height="150" controls="controls">
　　<source src="sample.ogv" type='video/ogg; codecs="theora,vorbis"'>
　　<source src="sample.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
</video>

複数の圧縮形式の動画ファイルをsource要素で指定することで様々なブラウザに対応対応させます。
動画ファイルの圧縮形式によってtype属性、codecs属性をそれぞれ指定します。

【source要素の属性】
src → 動画ファイルを指定
type → ファイルのMINEタイプを指定
media → ファイルの対象としているメディアを指定

【type属性の設定例】
type=’video/mp4; codecs=”avc1.42E01E,mp4a.40.2″‘
　　→ MP4コンテナ：シンプルベースライン H.264動画とAAC音声
type=’video/mp4; codecs=”mp4v.20.8,mp4a.40.2″‘
　　→ MP4コンテナ：MPEG-4 シンプルプロファイルレベル0動画とAAC音声
type=’video/ogg; codecs=”vorbis”‘
　　→ OGGコンテナ：vorbis 音声コーデック