HTML5 videoの組込み

HTML5からvideoタグが追加され動画(mp4)を再生できるようになった。
しかし、IE8ではaudioと同様videoがサポートされていないため動作しなかった。
調べてみると、audioと同様JavaScriptをhead内に記述すれば動作すると記載されているので試してみたところ、mp4ファイルが再生された。
WordPressではheder.phpの<head>~</head>内に下記の一行を追加する。(audioと同じものである)

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

投稿ページなどに次のソースコードを記述する。

<p>HTML5に対応したブラウザでは、動画が再生できます。</p>
<video controls width="500" height="400">
<source src="./wp-content/uploads/media/video.mp4" type="video/mp4"> 
</video>

videoのサンプル

HTML5に対応したブラウザでは、動画が再生できる。


mp4以外にoggとwebmを試してみたが、こちらはサポートされていないようで動作しなかった。全てを試した訳ではないがサポート状況は次のようである。

 ブラウザ mp4 ogg webm
Internet Explorer 9 サポート 非サポート 非サポート
Firefox 31 サポート サポート サポート
Chrome 18 サポート サポート サポート
Apple Safari 5 サポート 非サポート 非サポート
Opera 11.61 非サポート サポート サポート