Mapping areas on an HTML5 Video

Question

On an image in HTML, a <map> tag allows you to specify areas within the image that can be manipulated. Is there something similar to this that can be used with the HTML5 <video> tag?

Answer 1

<map> does not work with <video> elements, but you can fake it.

One way is to make a transparent image and position it on top of the video. Make a 1x1 pixel, completely transparent png file, and set it up like this:

<div id="container" style="position: relative; width: 640px; height: 360px;">
    <video src="foo.webm" width="640" height="360" style="position: absolute;"></video>
    <img src="pixel.png" usemap="mymap" width="640" height="360" style="position: absolute;"/>
</div>

While you're at it, you may as well save yourself some network overhead and load that png as a DataURI. Should be pretty small.

You could even use Popcorn.js to swap out different image maps at different times in the video.

One down side is that you're going to lose the ability to click on the video, as it's blocked by the image. So if you want to use the native controls, make sure to leave some space at the bottom by setting the height to be a little less.