HTML5 : <video>2011.06

HTML5での動画<video>の取り扱い。— “html5media” —

HTML5で動画<video>を使用する時のメモ。
IE6〜IE8など、HTML5未対応のブラウザーでも、それなりに表示させたい。
そんな時に役立つのが ”html5media”。

html5media

↑コントローラーはブラウザー側で用意しているデザインとなる。
IE6〜IE8など旧ブラウザでは、”flowplayer“が読込まれる。

設定方法

<head>個所で「html5media.min.js」を読込む

<script type="text/javascript"
src="http://api.html5media.info/1.1.4/html5media.min.js"></script>

<video>タグを設置

<video width="640" height="360" controls preload
poster="http://www.sebata.net/backstage/media/yp_3_pst.jpg" >
<source src="http://www.sebata.net/backstage/media/yp_3.mp4" />
<source src="http://www.sebata.net/backstage/media/yp_3.theora.ogv" />
</video>

「.htaccess」ファイルで以下を設定

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

関連リンク

関連事項

“html5media”と似たような機能のライブラリに、”VideoJS“がある。
こちらは、独自のコントローラーが提供されており、どのブラウザーでも統一感が保てる。
ただし、IE6〜IE8など旧ブラウザでは、”html5media”と同じく、”flowplayer“が読込まれる。

サンプルビデオに関して

  • オリジナルファイル:
    AAC, ステレオ(L R), 44.100 kHz / H.264, 1280 × 720, 約1670万色
  • スライドショー:
    iPhoto’09
  • BGM:
    Band in a Box, Logic Pro
2011年8月17日 2:48 PM