スマートフォン向けにHTML5のvideoタグを使ってみたのでまとめておく

HTML5の目玉機能の一つvideoタグ
videoタグを使えば、Flashを使わずに簡単に動画を埋め込むことができますが、一方でブラウザにより動画規格が統一されておらず、今後の標準がどうなるかもわかっていません。

が、とりあえず今回はアプリのWebView(iPhoneは厳密にいうとUIWebViewですが)を使って、ページを表示させることになったので、WebKitのことだけを意識したまとめとなっています。
Androidのすべてのブラウザで対応を考えている方も、基本的な部分は共通して使えると思うので、是非参考にしてみてください。

属性関係

とりあえずvideoタグを使って動画を埋め込んでみる

<video src="sample.mp4"></video>

非常に簡単です。
本来ならvideoタグ非対応ブラウザや別フォーマットの動画を考慮した書き方も必要ですが、今回はvideoタグに対応していること・Webkitを前提として考えているのでmp4のみでいきます。

サムネイル画像を設定

iPhoneなら動画の頭の画を自動で表示してくれますが、Androidでは端末の標準なビデオアイコンが表示されます。
なので、サムネイル用の画像を準備してposter属性に画像を設定する必要があります。

<video src="sample.mp4" poster="sample.jpg"></video>

preload(動画の自動読み込み)にはnoneを

スマートフォンは非力なため、動画を自動読み込みしているとページのスクロールがカクついたり、ストレスが溜まる原因となります。
デフォルトではpreload属性が「auto」(自動読み込みあり)になっているので「none」(自動読み込みなし)を設定する必要があります。

<video src="sample.mp4" poster="sample.jpg" preload="none"></video>

このままでは再生できない端末があるみたいなので

このままではAndroid端末でvideoタグをタップしても再生してくれない端末があるようです。
なので、onclick属性で自身がタップされた時に再生するように設定する必要があります。

<video src="sample.mp4" poster="sample.jpg" preload="none" onclick="this.play()"></video>

iPadなどのタブレット端末向けにコントローラーを表示

通常、スマートフォンでは、再生時に動画が自動でフルスクリーン表示になり、シークバーや一時停止ボタンなどのコントローラーが表示されます。
しかし、iPadなどのタブレット端末では、フルスクリーン表示にならずそのページ内で動画が再生されることになります。
フルスクリーンで見たい場合やシークバーなど再生のコントロールがしたい場合もあると思うので、controls属性を設定しておきましょう。

<video src="sample.mp4" poster="sample.jpg" preload="none" onclick="this.play()" controls></video>

ちなみに最近のAndroid端末ではcontrols属性を設定していると、自動でフルスクリーン表示で動画が再生される割には、サムネイル画像にコントローラーが表示されたりと機種によって仕様が異なっています。
ユーザーエージェントによるスマートフォンの端末判別方法について」の情報によると、スマートフォンのエージェントには「android」「mobile」が含まれているのに対して、タブレット端末のエージェントは「android」のみなので、そこで振り分けてやる手もあるかと思います。

CSS関係

iPhoneでサムネイル画像の左右に黒みが表示される

これはvideoタグのwidth・heightに値を指定すると消すことができます。
動画と同じ表示サイズに合わせてあげましょう。

video {
	width: 320px;
	height: 180px;
}

videoタグはimgタグと同じstyleしか使えない?

やってみようと思って、できたできなかったこんなこと。

  • borderを指定すると枠線がつく
  • widthを指定してmargin: 0 auto;しても中央寄せにならない
  • ブロック要素(div・h1・p・ulなど)で囲んで、text-align:centerを指定すると中央揃えになる

imgタグと同じ挙動ですね。サムネイル画像にstyleを指定してると考えるとわかりやすいかもしれませんね。

動画変換関係

基本的にiPhone・iPadはH.264で書き出したmp4ファイルでファイルが破損さえしてなければ、なんでもvideoタグで埋め込んで再生できますが、Androidでは変換の仕方によって、再生できる端末・できない端末が出てきます。
そんなときの対処法です。

mp4boxを使うといいらしい

Androidアプリでビデオ再生をしたときのエラー – Android開発覚書:Android Cafe
やってみて再生できない端末があったけどタダでやるならこの方法がいいみたいです。
アプリのビデオ再生用だといいけど、videoタグじゃダメってことですかね?

RealPlayer Converterで変換する

会社でAndroidアプリ用に動画変換するときには「RealPlayer Converter」を使ってます。
これで動画が見れないと問い合わせはきてないので確実でしょう。

変換の仕方は簡単でRealPlayer Converterへドラッグ・アンド・ドロップでファイルを追加して、フォーマットをApple iPhoneにするだけ。細かい書き出しの設定は「詳細」より行なってください。
書き出されたファイルの拡張子は「m4v」になりますが、そのまま使っても「mp4」に拡張子を書き換えてしまったも構いません。
昔はタダだったみたい(?)ですが、今はアップグレード版じゃないと変換できないみたいです。

あまり動画変換に関しては詳しくないので、いい方法・ソフトがあれば教えて下さい。

AndroidだとWebViewに載せたときにvideoタグの動画が再生されない

html5webviewを使いましょう

iPhoneではUIWebViewに載せてもちゃんと動画は再生されますが、AndroidのWebViewでは動画が再生されません。
これは今後バージョンアップで改善されるかもしれませんが、とりあえずはhtml5webviewを使えばなんとかなるようです。(今回はHTML・CSS・JS部分しかやってないのでこの辺は詳しくない。)

html5webview – An Android WebView Wrapper to Enable Quick HTML5 Setup – Google Project Hosting

長々と書いてしまいましたが、html5の標準フォーマットが決まり、スマートフォン全体のバージョンも上がってくれば、もっとシンプルになると思います。
許させるならyoutubeに動画をアップして埋め込むのが一番ラクな方法だと思うので、今はその辺も検討しながらvideoタグと付き合っていきましょう。


この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ