HTML5ではFlashムービープレイヤーなどを使わずに、videoタグのみで動画を再生する事が出来ます。ブラウザーによって対応している拡張子が違ったり、読み込み速度の問題など、色々と問題点もありますが、使い方をしっかり覚えておきましょう。
<video width="" height="" poster="img/poster.jpg" controls > <source src="img/〇〇○.mp4" type="video/mp4"> <source src="img/○○○.webm" type="video/webm"> </video>
poster属性
poster属性とは動画ファイルの読み込みが完了するまで表示させておく画像の指定です。回線環境によっては動画ファイルの読み込みに時間がかかるために事前に画像を用意して指定しておきます。
mp4とwebm
mp4
MPEG-4形式の圧縮動画データを格納するファイル形式の一つ。ISO/IEC 14496規格のPart 14の項で規定されている。MP4はApple社のメディア技術QuickTimeのファイル形式を元に策定されたISO/IEC 14496 Part 12の派生フォーマットで、従来のQuickTime形式の多くを踏襲した構造となっている。
webm
Googleが次世代のウェブ規格であるHTML5での使用を見据えて開発した、高画質・高圧縮率を実現するウェブ向けの動画コンテナフォーマット。
上の表を見ると判るように対応しているブラウザーも違ってきます。ここでは念の為に両方の拡張子を用意しますが、古いブラウザー以外はmp4で対応出来るので場合によってはmp4のみ置くと言う事も考えられます。
もちろんIE8はvideoタグが非対応なのでそのままでは表示出来ません。そんな時は「html5media」というJavaScriptのライブラリーを使いましょう。
この「html5media」はロードするだけでvideoタグ非対応のブラウザーでもFlashプレイヤーに置き換えて対応してくれるというとても便利なライブラリーなのです。Flashプレイヤーは以前からMP4形式の動画にも対応していますし、ほとんど全てのブラウザーにFlashのプラグインはインストールされているので問題ないでしょう。
<!--[if lt IE 9]> <script src="//api.html5media.info/1.1.8/html5media.min.js"></script> <![endif]-->
Can I use... Support tables for HTML5, CSS3, etc
動画ライブラリー
最近は無料の動画ライブラリーも増えてきたので、上手く使いましょう。
