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 版があります。

ありがとうございます!

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

ありがとうございます!

コメントを残す

メールアドレスが公開されることはありません。