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="https://www.sebata.net/backstage/media/yp_3_pst.jpg" > <source src="https://www.sebata.net/backstage/media/yp_3.mp4" /> <source src="https://www.sebata.net/backstage/media/yp_3.theora.ogv" /> </video>
「.htaccess」ファイルで以下を設定
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
関連リンク
- html5media
http://html5media.info/ - ビデオエンコード:Miro Video Converter
http://www.mirovideoconverter.com/ - 関連記事:video 要素 – html5doctor – HTML5.JP
http://www.html5.jp/html5doctor/the-video-element.html - 関連記事:<video>タグで動画を埋め込む-HTML5リファレンス
http://www.htmq.com/html5/004.shtml
関連事項
“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