iPhoneとAndroidで動画を再生する

Read More

スマートフォンのサイト内に動画を埋め込む必要がでてきた。


まあPCサイトとかMobile向けサイトだと動画再生の機能を付けるにしても情報がだいぶ出回っているのであまり問題にはならない。
# バイト制限的な問題は常にあるが


けど問題はスマートフォン向けだ。

iPhoneではFLASHが使えなかったりするし、なによりスマートフォン向けのサイト構築に関するノウハウが大してない。

スマホで動画再生をさせるにしても、どの拡張子がつかえるのかとかそんな所から調べなくてはならない。

スマホのために書籍買うのは絶対いやなんだよなあ…


そもそも自分はシステム屋(だと思っている)ので、サイト構築などの取り組み方がそんなに真剣じゃない。

とりあえず~とりあえず~とかを口癖にしながら作ってきた。


今回もとりあえず動画がどんな形であれ再生できれば目的は達成する。




さて結論から書くと、
iPhoneでもAndroidでもとりあえず動くのが確認とれるとこまで行った。

忘れないように実装方法のメモを残しておく。


用意する動画ファイルはmp4。
<video src="sample.mp4" controls preload="metadata" onclick="this.play();">
 <a href="sample.mp4">再生</a>
</video>



コードはhtml5で書くことが前提となっていることに注意したい。


ちなみにiPhone4のみで動かすには正直video要素だけで良い。

でもvideo要素だけだとAUのアクオスフォン(型番失念)で動画を見ることができなかった。
で、javascriptのonclick()を追加した。

でもよく考えたらスマホでonclickのイベントって取得できるのかしら?

まあ動いてるからいいんだけど。


a要素はvideoタグ自体が有効にならないものの対応策として気休め程度に入れてある。




ま、新しい問題が発見されるまではとりあえずこれでいいや


Category "HTML・JS・CSS" の最新記事