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;
}

注意：即使使用轻微的不透明度，也要注意一个缺点。对于某些浏览器（或至少是浏览器的版本），出现在具有不透明度的图层中的文本最终可能会出现错误或缺少抗锯齿。但这主要发生在更旧版本的 Firefox 和 Chrome 中。

更新

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

为什么在 [在此处插入母星] 这对 Codepen 有效，但在我自己的 localhost 服务的 iframe 中却无效...？？

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

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

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

一种非常奇怪的状态......这就是我期望 Chrome 的那种奇怪！不是很好的 Firefox。