HTML5 の video タグを使って、スマホで動画を再生する方法

スマホで動画を再生する必要があったので、HTML5 の video タグを使った方法を調べてみました。

動画の設置方法 ———————————————————————-

色々試してみましたが、mp4 を使って、controls 属性を書いておけば動くっぽい。

念入りに書くには、次のように動画を設置します。

head 内で html5media.min.js を読み込む

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

video タグを設置

<video poster="test.jpg" controls preload>
    <source src="test.mp4">
    <source src="test.ogv">
    <source src="test.webm">
</video>

.htaccess で以下を設定する

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

再生を確認した環境 ———————————————————————-

– Apple iPhone 5 – iOS 6.1.4 – AQUOS PHONE – Android 4.x – Galaxy S ( SC-02B ) – Android 2.3.3

mp4 を ogv や webm に変換できるフリーソフト ———————————————————————-

今回は、mp4 を ogv や webm に変換できるフリーソフトを利用しました。 Mac, Windows 版があります。

– Miro Video Converter FREE – Convert any video to MP4, WebM (vp8), iPhone, Android, iPod, iPad, and more.

ありがとうございます！

参考にさせてもらったページ ———————————————————————-

– HTML5 での動画 <video> の取り扱い。html5media | Backstage – iPhone/Androidブラウザで動画を再生するときのハマりポイントと対処法 | case:MobileDesign! – スマートフォンサイトの制作TIPS BLOG –

ありがとうございます！