• HTML

mp4動画を埋め込む際のvideoタグ使用の注意

html5で動画埋め込み用のvideoタグ使用の際、
詰まったところを記録いたす。

案件の内容は、topページに先方の用意した動画ファイルを埋め込んで見れるようにするというもの。

実はこの手の案件はyoutube埋め込んでyoutubeのロゴを消したり
jqueryのプラグインを使用してクリアしていたのだが

今回はyoutubeは使いたくないというこだわりが先方にあったので
videoタグを使うことにしたのだが、
これが結構厄介だった。

参考
http://www.htmq.com/html5/004.shtml
http://www.htmq.com/html5/video.shtml

 
基本使用例

<video src="sample.mp4">
<p>動画を再生するにはvideoタグをサポートしたブラウザが必要です。</p>　※サポートされてないブラウザ用
</video>

さてさて、これでいいのかというと・・・・よくなかった
まず、mp4を再生できるのはGoogle ChromeとSafariだけなのであった。
FirefoxでもIEでも見せたい。
そのためには、webm形式、ogv形式の動画を用意せねばならなかった。

なので、mp4データを使って、webm形式、ogv形式の動画を用意した。
そしてsourceを利用してこのように記述

<video controls autoplay muted>
<source src="sample.mp4" type="video/mp4">
<source src="sample.webm" type="video/webm">
<source src="sample.ogv" type="video/ogg">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

上から順番に試して、読み込み可能な動画を再生するって感じです。

controls autoplay mutedはオプションで
controls　コントローラー表示
autoplay　オート再生
muted　音消し

などなど