Javascript 图像下的html5视频

我有一个视频，它位于一个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>

[FMP海报=”http://www.mysite.com/wp-content/uploads/thumb.jpg“width=“640”height=“360”]http://www.mysite.com/wp-content/uploads/movie.webm[/FMP]

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

我已经研究了CSS指针事件：none属性，这只适用于Firefox和Safari浏览器。我知道我可以制作自己的视频控制按钮，并将它们放置在z索引较高的图像上方，但我更喜欢使用浏览器的原生视频控制。有没有更好的方法呢？

是很零碎的

要实现您想要的，而不必重新实施播放器控制，我认为您有两个选择：

---

看看一些可用的HTML5视频库。我相信其中一个将允许您根据需要设置控件的样式

将遮罩图像分解为顶部、右侧、底部和左侧切片，并使用这些切片来设置元素的边框，必要时将其覆盖。只要没有任何帧元素覆盖视频控件，您就可以了

这是相当零碎的

要实现您想要的，而不必重新实施播放器控制，我认为您有两个选择：

---

看看一些可用的HTML5视频库。我相信其中一个将允许您根据需要设置控件的样式

将遮罩图像分解为顶部、右侧、底部和左侧切片，并使用这些切片来设置元素的边框，必要时将其覆盖。只要没有任何帧元素覆盖视频控件，您就可以了

---

不幸的是，您唯一的选择（除了分解图像以使其不受阻碍）是制作自己的控件并将其放置在透明图像上

<video controls="false" id="myVid">
    ...
</video>
...
<img src="play.png" id="playButton" onclick="togglePlay()" />

---

你可以随心所欲地设置按钮的样式，例如，将它们直接放在视频上，给它们一个比透明图像更高的z索引，在鼠标移出时使它们消失（或者使用一个脚本使它们消失，当鼠标移到某些x/y边界外时），等等。

不幸的是，这是你唯一的选择（除了分解图像以使其不受阻碍之外）是制作自己的控件并将其放置在透明图像上

<video controls="false" id="myVid">
    ...
</video>
...
<img src="play.png" id="playButton" onclick="togglePlay()" />

---

---

您可以随意设置按钮的样式，例如，将它们直接放置在视频上，给它们一个比透明图像更高的z索引，在鼠标移出时使它们消失（或者在鼠标移出某些x/y边界时使用脚本使它们消失）等等。

视频上的图像的用途是什么？在视频播放过程中是否也可见？这只是设计问题，视频上的一些图像是不透明的。您能否定位图像，使其不会阻挡媒体播放器的控件？就这样，视频控件通过视频的透明部分显示png，只有视频左侧和顶部的一部分被实际图像覆盖。问题是，即使可以看到控件，也无法单击。哦，是的，F.卡尔德兰，图像需要始终可见视频上的图像的目的是什么？在视频播放过程中是否也可见？这只是一个问题设计方面，视频上的一些图像是不透明的。你能定位图像，使其不会阻塞媒体播放器的控件吗？它已经是这样了，视频控件通过png的透明部分显示，只有一部分视频的左侧和顶部被实际图像覆盖。问题是c控件，即使可以看到，也无法点击。哦，是的，F.卡尔德兰，图像需要始终可见谢谢你的回复，但这不是我想要的，因为它不完全是一个边框，因为png图像覆盖了视频的一部分。关于我想要的，想象一个中间有一个透明框的黑色png图像。现在想象一下，图像下面有一个html5，你可以通过png的透明部分看到它的一部分。现在，如果你点击透明部分，我希望能够访问下面的内容，因此如果你能看到我希望能够使用的控件。好吧，我不认为有办法做到这一点，因为覆盖的png总是会阻止任何内容与它下面的元素交互。但是，我认为我的原始答案仍然有效（至少是关于使用标记实现视频元素帧的部分）。我建议将图像分为顶部、右侧、底部和左侧切片，并使用它们来设置元素的帧，必要时将其覆盖。只要没有帧元素覆盖视频控件，您就可以了。是的，这是我的下一步，但我试图避免对图像进行切片。正如我所说，指针事件：无禁用此行为在Firefox和Safari中使用viour，但在其他浏览器中还没有。我宁愿给视频控件一个比png图像更高的z索引，这样它们就可以使用，但我想这是不可能的，除非我为播放器制作自己的控件。看看一些可用的HTML5视频库。我几乎可以肯定在其中一个中，您可以控制更改z索引所需控件的样式，而无需实现自己的自定义控件集。感谢您的回复，但这不是我想要的，因为它不完全是一个边框，因为png图像覆盖了视频的一部分。关于我想要的，想象一下黑色png图像，中间有一个透明框。现在想象一个html5在该图像下面，你可以通过png的透明部分看到它的一部分。现在如果你点击透明部分，我希望能够访问下面的内容，所以如果你能看到我希望能够使用的控件。好吧，我不认为有什么方法可以做到将此设置为覆盖的PNG将始终为blo