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 –

ありがとうございます！

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。