javascript - 图片下的html5视频

Question

我有一个位于 png 图像下方的视频，该图像有一个透明部分供视频显示。

<div id="Layer2" style="position:absolute; z-index:2; left: 0px; top: 0px; width: 960px; height: 640px; visibility: visible">
<div align="left"><img src="http://www.mysite.com/wp-content/uploads/picture.png" width="960" height="640" /></div>
</div>
<div id="Layer1" style="position:absolute; z-index:1; left: 251px; top: 91px; width: 640px; height: 360px; overflow: hidden; visibility: visible; ">
<div align="left" >[FMP poster="http://www.mysite.com/wp-content/uploads/thumb.jpg" width="640" height="360"]http://www.mysite.com/wp-content/uploads/movie.webm[/FMP]</div>
</div>

如何使视频可点击以便人们可以访问视频控件？

我查看了 CSS point-events:none 属性，它有效，但仅在 Firefox 和 Safari 浏览器中有效。我知道我可以制作自己的视频控制按钮，并将它们放置在具有更高 z-index 的图像上方，但我更喜欢使用浏览器的 native 视频控件。有更好的方法吗？

Answer 1

Support for the CSS3 pointer-events property非常不完整。

要实现您想要的效果而无需重新实现播放器控件，我认为您有两种选择:

1. 查看一些可用的 HTML5 视频库。我确信其中之一将允许您将控件样式设置为您需要的级别。

2. 将蒙版图像分解为顶部、右侧、底部和左侧切片，并使用这些切片来构建元素，并在必要时将其覆盖。只要没有任何框架元素覆盖视频控件就应该没问题