スポンサーサイト

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTML5 での"クリッカブル動画"

  • トゥィッターで言及(トゥィート)
  • アメーバで共有
  • はてなブックマークに登録
  • フェイスブックで共有
  • タンブラーで共有
  • グーグルプラスで共有

HTML5 が勧告され、非対応ウェブブラウザも急速にシェアを落とし、今やウェブページへの HTML5 採用には躊躇う必要がなくなりつつあります。

ところで、HTML5 の規格化の際に中核となったアップル社はアドビ・フラッシュを目の敵にしたのは有名で、HTML5 でもフラッシュの駆逐を目指したと言われております。

かつてはページ全体をフラッシュで作ったとんでもない代物もありましたが、HTML5 でなら、その後継技術として、MPEG 4 動画をクリッカブルにしたページなんて恐ろしい代物も作れます。

勿論、そんな恐ろしい物は作ってもらいたいとは思いませんが、一応そのための方法を簡単に書いてみました。


クリッカブル動画の考え方

先ず、<video>要素には、usemap 属性は定義されておりません

でも、CSS のポジショニングを用いれば、動画の上に<img>要素で埋込んだ無色透明な画像を重ね合わせる事が可能です。

この無色透明な画像を埋込む<img>要素に usemap 属性を与えてクリッカブルにすれば、結果としてその裏に埋込まれた動画をクリッカブルにする事が可能になります。


実際のマークアップ

例えば、こんな感じでしょうか:

  • style 属性はアクセシビリティの問題があるため、本来好ましいものではありませんが、スタイルを固定しないと使いものにならないのも事実なので、仕方がないでしょう。
<figure style="position: relative; top: 0; left: 0; ">
    <video width="960" height="480" poster="index.GIF" src="index.MP4" style="position: absolute; top: 0; left: 0; " autoplay="autoplay" loop="loop">
        <img alt="○○公式サイト" width="960" height="480" src="index.GIF"style="position: absolute; top: 0; left: 0; " />
        </video>
    <img alt="" src="Transparent.GIF" width="960" height="480" style="position: absolute; top: 0; left: 0; width: 960px; height: 480px; " usemap="#INDEX_MAP" />
    </figure><map name="INDEX_MAP" id="INDEX_MAP">
    (イメージマップのクリッカブル部分となる<area>要素が並びます)
    </map>

マークアップの仕組み

このマークアップは以下のような仕組みとなります

  1. <video>要素内にある<img>要素はインターネットエクスプローラ 8 など、HTML5 未対応の環境で代わりにクリッカブルにされる静止画を埋め込むものです。
  2. 一方、<video>要素に続く<img>要素は、動画または代替となる静止画に重ね合わせる無色透明な GIF 画像となります。

    • この GIF 画像は<video>要素の poster 属性でも指定されており、動画が再生されるまでの間はこの画像がクリッカブルとなる訳です。
  3. この GIF 画像に usemap 属性を与えてクリッカブルにします。
  4. <video>要素と二つの<img>要素にはいずれにもstyle 属性で全く同じ位置に配置されるようにしており、これに依り動画や静止画の上にクリッカブルな透明画像が重なるようにします。
  5. 尚、三つの要素が同じ位置に来るため基準点を定めるため、これらの要素のコンテナとなる<figure>要素にも style 属性でポジショニングの原点を指定するためのスタイル指定を行っております。

注意すべき事


動画や画像を縮小する場合には注意

レスポンシヴ・ウェブデザインでは、しばしば埋込む動画や画像の表示上の解像度を適宜縮小する事があります。

表示上の解像度を縮小した場合、クリッカブルマップに用いられる<area>要素coords 属性で指定した相対座標が正しい位置と成らなくなります

このため、動画や画像を縮小する場合には、ECMA スクリプト(JAVA スクリプト)を使って coords 属性の値を修正しなければなりません


動画は必ずしも再生されない事に注意

仮令<video>要素autoplay 属性値を与えて自動再生させるつもりであっても、iOS 端末では閲覧者が操作しない限り動画を読込んではくれません

このため、最低限のクリッカブルな画像を poster 属性で与えておき、静止画でもクリッカブルになるようにすると良いでしょう。


動画のファイルサイズを考えよう

デスクトップ・コンピュータなどで長時間再生する動画の場合、画面いっぱいに表示される動画だと、再生時間にも依りますが、相当な重さになる事が予想されます。

このため、静止画或いはテキストでのメニューも利用出来るようにすべきでしょう


蛇足:この記事を書いた動機

某大手航空会社のサイトに、<video>要素で MPEG 4 動画を何本も埋め込んだプロモーションページがありました。

こんなページをモバイルで開いたらあっと言う間に電池がなくなっちまうんじゃね?と思いつつ、かつてよく見られたフラッシュだけで作られたサイトを思い出してしまい、この記事を書きました。

  • まぁ、制作者も人のことは言えませんが…^^;

この記事は、もう少し詳しく書いて本拠地サイトに載せようかとも思っておりますが、クリッカブル動画の実用性がどれほどのものか分からないので、取敢えず本ウェブログにて公開する事としました。

関連記事
スポンサーサイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。