ヘッダ動画の例

ホームページのヘッダ画像を動画化する

HTML5のvideoタグは、JPGやGIFを扱うのと同じ感覚で動画が貼り付けできる便利な形式です。2016年1月現在、主要なブラウザ(IE/Chrome/Safari/Firefox)はvideoタグによるMP4(H.264)動画の貼り付けに対応していますので、YouTube等を介さずに、気軽に動画が貼り付けできる時代になりました。

しかし、videoタグの動画再生に対応していない環境もあります。例えば、スマホやタブレットのブラウザはvideoタグの「自動再生」をサポートしていません。これは通信費の上昇を抑えるための施策と思われます。この場合、予備に表示する画像を設定しておけば、動画が再生できない場合はその場所に画像が表示されます。

特に商業サイトにおいては、videoタグによる動画のインパクトを狙いつつ、再生がサポートされない場合に備えて、静止画で情報のバランスを取るのがポイントです。

■主なメリット
・既存のサイトデザインを崩さずに、画像を動画に置き換えできる。
・JavaScriptを使わないので、サイトが重くなりにくい。
・HTMLの記述がシンプルで扱いが容易。
・既存の動画データを流用しやすい。
・自動再生、自動読み込み、コントロールバーの表示等の設定に標準対応。


■実際の貼り付け例

下記の動画は、弊社のサイトで使っているヘッダ動画です。<video>タグで貼り付けしています。videoタグを使った貼り付けでは、任意のサイズの動画が扱える上、貼付け時にもサイズを変更できるので、サイトの設計にピッタリハマる動画が設置しやすいです。
それぞれの動画は、右クリックからPCにダウンロードできます。DLして参考にして頂いてもOKです。


サイズ:1016x478pix ファイルサイズ:620KB 再生時間:5秒 ループ再生

環境により動画が再生できない場合は、動画の代わりにJPG画像が表示されます。

この動画のvideoタグは次の通り

<video src="http://digitalsignage-kure.jp/head20150627.mp4" poster="http://digitalsignage-kure.jp/head20150627.jpg" controls loop preload="none"></video>


サイズ:1016x478pix ファイルサイズ:3.52MB 再生時間:29秒 ループ再生

環境により動画が再生できない場合は、動画の代わりにJPG画像が表示されます。

この動画のvideoタグは次の通り

<video src="http://digitalsignage-kure.jp/img/douga-top.mp4" poster="http://digitalsignage-kure.jp/img/douga-top.jpg" controls loop preload="none"></video>


サイズ:1016x478pix ファイルサイズ:5.8MB 再生時間:51秒

環境により動画が再生できない場合は、動画の代わりにJPG画像が表示されます。

この動画のvideoタグは次の通り

<video src="http://digitalsignage-kure.jp/img/douga-kouza02.mp4" poster="http://digitalsignage-kure.jp/img/douga-kouza02.jpg" controls loop preload="none"></video>

■任意のサイズのMP4動画を作る方法
任意サイズのMP4動画を作るには、動画編集ソフトの扱いが前提になります。CorelVideoStudioシリーズとフリーソフトのXMedia Recodeを使ってサイズをカスタマイズした動画を作る方法を、次の記事で解説しています。
http://www.videostudio-maniax.jp/?p=1334

■ヘッダ動画の制作依頼
http://www.digitalsignage-kure.jp/video/index.html



→デジタルサイネージ導入と動画制作のご相談

→30秒で御社に最適なデジタルサイネージを調べる方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA