html - Firefox Mac 阻止播放带覆盖的视频

Question

遗憾的是，当您直接点击 YouTube 播放器本身时，YouTube 只会计算视频的观看次数。这是为了防止欺诈性的高观看次数。如果您最初不想显示 YouTube 播放器，一种方法是使用 pointer-events: none 在顶部放置一个不透明的叠加层和图形。当用户点击您的叠加层时，他们实际上是在点击 YouTube 视频，因此会计算观看次数。然后，您捕获“正在播放”事件并隐藏叠加层以暴露下面的播放器。

我的主页上有一个图片，当你点击它时，它会播放一个 YouTube 视频。在有人喊“点击劫持”之前，我不是想欺骗任何人 - 图形中有一个播放按钮，所以你知道这是一个视频。

除了 Mac OS 上的 FireFox 之外，这对我来说完全没问题。我使用的是最新版本 - 目前在我的测试中是 34.0.5。

演示页面:http://www.googledrive.com/host/0B3INRRYhLi7cVHNKTzhMdnRjT3M

• 如果您在 Chrome/FireFox Windows/最新 IE 版本中运行此程序并单击绿色覆盖层，视频将播放，您将听到音乐。

• 注意:当然，在我的真实页面中，我捕获了 isplaying 事件并隐藏了叠加层。

Firefox 显然在做某种点击劫持保护。如果它认为您试图通过覆盖视频来欺骗用户，那么它就不会播放。然而，令我感到奇怪的是它在 Windows 上也没有这样做。

有两种方法可以让视频在 Mac FireFox 上播放 - 都涉及部分显示下面的 Youtube 视频:

• 如果您点击“将不透明度更改为 75%”，它会在下方显示视频。如果您随后单击它，它将正常播放。
• 如果您点击“缩小叠加层”，则叠加层不会完全覆盖视频。单击它即可正常播放。

最奇怪的是 - 当你在 iframe 中查看它时它工作得很好(这就是为什么我在上面使用 GoogleDrive link 打开全屏)而不是类似 codepen/jsfiddle http://codepen.io/anon/pen/GgrZNN 的东西

我真的在寻找一种不涉及 if (firefox && mac) 的解决方法。如果这在 mozilla 文档的某处有记录，我还没有找到。

附言。显然，没有 pointer-events 的浏览器必须通过点击事件区别对待。此示例中未显示这一点。

(我正在使用 Browserstack.com 进行测试，但它在真实的 Mac 上也是如此。)

Answer 1

我遇到了同样的问题 Firefox Mac(并且还没有升级到 Yosemite)，但在我看来你已经解决了你自己的问题。我能看到的最简单的解决方案是在您当前的覆盖层下方添加一个额外的覆盖层，并将它们都设置为不透明度 0.98(这似乎是您可以达到的最高值并且仍然可以点击 - 至少在我的测试中是这样)。

显然，这将取决于您希望在叠加层上显示的内容，但对于我在本地进行的测试，我将底层叠加层(抱歉，名称荒谬)设置为黑色。这意味着下面的视频是无法察觉的。您甚至可以将不透明度降低一点，并仍然用两层来阻止所有内容，以防点击阻止的不透明度阈值在不同版本的 Firefox 中有所不同。

.x-overlay {
  opacity: 0.98;
  ...
}

.x-under-overlay {
  opacity: 0.98;
  position: absolute;
  background: rgba(0, 0, 0, 1);
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

NOTE: One downside to be aware of when using even slight opacity. For certain browsers (or at least versions of browsers) text that appears in a layer that has opacity can end up with buggy or missing anti-aliasing. But this mainly occurred in much older versions of Firefox and Chrome.

更新

好吧，这让我有点绕墙，或者上弯，或者有什么奇怪的短语可以用来描述不断期待一件事，但总是得到另一件事的经历……这与the definition of crazy .

为什么在 [insert home planet here] 上为 Codepen 工作，但在我自己的本地主机服务的 iframe 中却没有...？？

在尝试了很多不同的事情之后，我发现了 sandbox 属性，我之前真的应该注意到它；特别是考虑到它可以通过 native 浏览器进程启用和禁用的所有奇怪技巧。快速试用和稍后的一些错误，似乎是什么允许它对大多数在线代码 fiddler 起作用如下:

<iframe src="index.html" sandbox="allow-scripts allow-same-origin"></iframe>

仍然没有找到确切的原因，但如果我在我的本地主机框架上启用上述功能，它就会开始工作，而无需使用不透明技巧。我猜它一定会导致 Firefox 通过不同的进程进行路由，或者它可能只是禁用了某种跨源点击劫持保护。

一个非常奇怪的事态……这就是我对 Chrome 的期望! Firefox 不好。