5

在 HTML 中的图像上，<map>标签允许您指定图像中可以操作的区域。是否有类似的东西可以与 HTML5<video>标签一起使用？

4

1 回答 1

8

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

不利的一面是您将失去点击视频的能力，因为它被图像挡住了。因此，如果您想使用本机控件，请确保通过将高度设置得小一些，在底部留出一些空间。

于 2012-11-22T13:43:25.760 回答