映射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在视频中的不同时间换出不同的图像地图。

一个缺点是你将失去点击视频的能力，因为它被图像阻挡了。因此，如果您想使用原生控件，请确保在底部留出一些空间，方法是将高度设置得更低。