さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】動画再生のブラウザ対応

Pocket
LINEで送る

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 音声コーデック

カテゴリー:HP制作, HTML5

コメントを残す

コメント内容