在HTML5视频上映射区域

Question

在HTML图像上，<map>标签可让您指定图像中可操作的区域。HTML5 <video>标签是否可以使用与此类似的内容？

Answer 1

<map>不适用于<video>元素，但是您可以伪造它。

一种方法是制作透明图像并将其放置在视频顶部。制作一个1x1像素，完全透明的png文件，并将其设置如下：

<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>

在使用它的同时，您还可以节省一些网络开销，并将该png加载为DataURI。应该很小。

您甚至可以使用Popcorn.js在视频中的不同时间交换不同的图像映射。

不利的一面是，您将无法点击视频，因为它被图像遮挡了。因此，如果要使用本机控件，请通过将高度设置为较小一点，确保在底部保留一些空间。