HTML5のVIDEOタグ使用の注意点など

Advertisement


※模索して行った物なのでミスリードの可能性がありますのでご注意下さい。

なかなか動かなくてハマリました・・・動画やっぱこわい。。
タグ自体はシンプルなんですが、ブラウザ対応の動画形式が違うんですね。
何が面倒って、その動画形式や対応状況などを加味して用意するのが面倒でした。

用意する動画は
mp4 : Chrome・Safari・IE9
ogv : Firefox・Opera
webm : Chrome・Opera
という具合。
更に、もちろんHTML5をサポートしていないブラウザも有り。

動画の変換ですが、僕はこのツールを使いました。

XMedia Recorde
http://www.forest.impress.co.jp/lib/pic/video/vdoenc/xmediarecode.html
(窓の社)

読み込んで形式を選択してエンコードボタンをクリックすれば基本、変換されてます。

挿入したタグはこちら(色々省略)

<video id="player1" autoplay loop >
<source src="●●●.mp4">
<source src="●●●.ogv">
<source src="●●●.webm">
</video>

FirefoxがLoopしない

今回、スライダーの背景に動画を使ったのでループが必須でした。
ただ、VIDEOタグのLoopですが、Firefoxが機能しません。
ここはJSで動かします。
<script type="text/javascript">
document.getElementById('●●●').addEventListener('ended', function(){
this.currentTime = 0;
}, false);
</script>

動かない時はhtaccessも

あと、動かない時はhtaccess等で設定してあげる。
AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm
サーバ設定の問題で動かない事はけっこうありました。

MediaElement.js面白かった

これを使うと上記で挙げたような様々なブラウザ毎の対応を一挙に担いでくれる。
<object type="application/x-shockwave-flash" data="●●●.swf">
<param name="movie" value="●●●.swf" />
<param name="flashvars" value="controls=true&file=●●●.mp4" />
</object>
と、VIDEOタグ内に追記してあげれば、未対応ブラウザではFlash/SilverlightでUIを変える事無く再生されます。
更にコントローラー含め、様々なスキンを適用させたり、更にYouTubeやVimio等を読み込むためのプラグインがあったりと、HTML5 VIDEOタグの決定版なんじゃないのか?と思うほど感動しました。
でもちょっと使いこなすのが難しいので、まだまだメリット・デメリットを模索中です。

mediaelementjs
http://mediaelementjs.com/

NHKのフリー映像素材

おまけです。
NHKは、「NHKクリエイティブ・ライブラリー」という映像素材サイトを開設しています。
著作者名(NHK)を表示すれば非営利で無料使用できます。編集・加工も自由です。
素材は、今までNHKで使用された画像などです。利用ルールはこちらにあります。
また、同サイト上で簡単な映像編集なんかも行えます。

NHKクリエイティブ・ライブラリー
http://www.nhk.or.jp/creative/



参考記事
スマートフォン向けHTML5のVIDEOタグを使った動画再生 ~MediaElement.js編~|alt
SE奮闘記:HTML5のVideo Tagを使う際の注意点とiPad, iPhone向けの動画へ変換する
HTML5 VideoまとめとMediaElement.js|マイナビニュース
HTML5表示における配信サイトの不具合


何か抜けてる気がするんですが・・・足りない点などあれば教えていただけるとすっごく嬉しいです。