<video>に<map>や<area>は効きますか？いいえ、効きません。

はじめに

videoタグで表示されている動画に複数リンクを効かせたいということがありまして、
色々調べた結果、mapタグやareaタグというものがあることを知りました。(かなり昔からあるものなのね)
基本的な使い方はこちら → http://www.htmq.com/html5/area.shtml
仕様を見る限り、<map>や<area>は指定の<img>に対して効かせることはできるようですが、
素材という意味ではそこまで差のない<video>に効かせることはできるのか検証してみました。

試してみた

video_multilink.html

<video src="sample.mp4" width="640" height="360" usemap="#video-multilink"></video>
<map name="video-multilink">
  <area shape="rect" coords="0,0,640,120" href="link1.html">
  <area shape="rect" coords="0,120,640,240" href="link2.html">
  <area shape="rect" coords="0,240,640,360" href="link3.html">
</map>

ダメでした。
videoタグはusemap属性持っていないようなので当たり前といえば当たり前。

対処法

<video>にmapやareaを効かせるのは無理だったので他の方法を考えます。
一番シンプルに思いつくのは、<video>の上に透明な画像を敷いてその画像に対して<map><area>を効かせることですね。
やってみましょう。

video_multilink2.html

<video src="sample.mp4" width="640" height="360"></video>
<img src="/path/to/skeleton.gif" usemap="#video-multilink" style="position:absolute; left:0px;" width="640" height="360">
<map name="video-multilink">
  <area shape="rect" coords="0,0,640,120" href="link1.html">
  <area shape="rect" coords="0,120,640,240" href="link2.html">
  <area shape="rect" coords="0,240,640,360" href="link3.html">
</map>

効きました。

とはいえもう少し良い方法ないかなーと思っているのも事実なので、代案募集中です。