0

我有一个位于 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 pointer-events:none 属性，这有效，但仅在 Firefox 和 Safari 浏览器中有效。我知道我可以制作自己的视频控制按钮并将它们放在具有更高 z-index 的图像上方，但我更喜欢使用浏览器的原生视频控件。有一个更好的方法吗？

4

2 回答 2

2

对 CSS3 指针事件属性的支持相当不完整。

为了在不必重新实现播放器控件的情况下实现您想要的，我认为您有两种选择：

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

  2. 将您的蒙版图像分解为顶部、右侧、底部和左侧的切片，并使用它们来框住您的元素，并在必要时将其覆盖。只要没有任何框架元素覆盖视频控件，您就可以了

于 2012-05-08T13:02:01.323 回答
1

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

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

在哪里togglePlay：

function togglePlay() {
    var vid = document.getElementById("myVid");
    var button = document.getElementById("playButton"); 
    if(vid.paused) {
        vid.play();
        playButton.src = "pause.png";
    } else {
        vid.pause();
        playButton.src = "play.png"; 
    }
}

您可以根据自己的喜好设置按钮的样式，例如，将它们直接放在视频上，给它们比透明图像更高的 z-index，使它们在鼠标移出时消失（或使用使它们消失的脚本） /y 边界）等。

于 2012-05-08T13:42:20.287 回答