動画のスマートフォン対応

ホームページで動画を公開する際、スマートフォンで再生出来る方法を説明しています。

フラッシュについて

 ホームページを公開する際、FLV形式の動画がこれまで多く使われてきましたが、iPhoneではサポートしていません。又、Androidでもデフォルトの状態では再生出来ません。

 このため、「動画の埋め込み」で説明したYouTubeにアップロードして公開する方法が最も簡単です。YouTubeであればiPhoneでもAndroidでも再生出来ます。

 又、動画のデータ量はかなり大きくなります。レンタルサーバーでは1日の通信量が決まっている事があるため、動画を多く公開する場合は気を付ける必要がありますが、YouTubeで公開すれば動画での通信量については気にする必要がなくなります。

HTML5

 iPhoneやAndroid等でサポートしているのはMP4やWebM形式です。

 現時点でiPhoneやInternetExploler等がWebMに対応していない事を考えると、MP4が最も汎用的です。MP4へは「動画の埋め込み」でご紹介した「ムービーメーカー」、「PowerDirector」、「Freemaker Video Converter」等で変換出来ます。

 動画を埋め込むには以下のように記述します。

【HTML5での動画再生】
<video src="a1.mp4" controls poster="a1.png"></video>

 赤字部分は動画のファイル名です。青字部分はオプションで以下の意味です。

・controls
 動画の下に再生ボタンや音量調節等のコントローラを付けます。
・poster
 動画開始前に表示する画像を指定します。

 上記の通り指定した例が以下です。※再生すると音が出ます。

 autoplayというオプションもあり、自動的に動画が開始されます。他にloopオプションを指定すると繰り返し再生されます。

幅の指定

 動画の幅が広い時、パソコンからの参照ではそのままの幅、スマートフォンからの参照では納まる幅で表示したい場合はCSSで以下のようにします。

【動画の幅指定】
@media (max-width:767px) { video {
max-width: 100%;
} }

 上記により、スマートフォンの幅に合わせて表示されます。

複数の動画ファイル指定

 動画ファイルは複数指定する事も出来ます。

【複数の動画ファイル指定】
<video controls poster="a1.png">
<source src="a1.mp4">
<source src="a1.webm">
</video>

 上記により、MP4がサポートされていない場合はWebMで再生されます。

留意点

 <video>タグはHTML5で追加されました。HTML5はInternet Explorer9からサポートされています。

 WindowsXPはInternet Explorer8までしか対応していないため、WindowsXPを使っている人がInternet Explorerでアクセスすると、<video>タグを利用した動画が表示されません。

 又、Windows7はInternet Explorer8からサポートしているため、Internet Explorer8でのアクセスはまだそれなりにあります。(「ユーザー環境の統計」参照)

 <video>タグは、</video>タグとの間に他のタグを挟む事が出来ます。このため、以下のようにHTML4でFLV形式の再生を指定する事も出来ます。

【HTML5とFLV再生の切り替え】
<video src="a1.mp4" controls poster="a1.png">
<object id=0 type="application/x-shockwave-flash" data=a1.swf width=640 height=360>
<param name="movie" value=a1.swf>
<param name="FlashVars" value="flv=a1.flv&title=魚の動画&margin=0" />
</object>
</video>

 上記でHTML5で再生出来る場合はMP4形式、WindowsXPのInternet Explorer8等でのアクセス時はFLV形式で再生されます。

 FLV形式での動作指定方法は、「動画の埋め込み」を参照して下さい。

サイト関連1

ホームページ作成「簡単!スマートフォン対応
ホームページ作成「画像のスマートフォン対応
ホームページ作成「画像のRetinaディスプレイ対応
ホームページ作成「表のスマートフォン対応
ホームページ作成「タップターゲットのサイズ調整
ホームページ作成「スマホとパソコンで表示を変える
ホームページ作成「スマートフォン対応後の確認
  • このエントリーをはてなブックマークに追加