Question

不幸的是，只有当您直接点击YouTube播放器本身时，YouTube才会对视频进行计数。这是为了防止欺诈性的高视图计数。如果您不想最初展示YouTube播放器，则可以使用pointer-events: none在顶部放置不透明的叠加层和图形。当用户点击您的叠加层时，他们实际上会点击YouTube视频，以便计算视图。然后，您可以捕捉“正在播放”事件并隐藏覆盖物，从而使玩家暴露在下面。

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

对于除Mac OS上的FireFox之外的所有内容，这对我来说完全没问题。我正在使用最新版本 - 目前在我的测试中为34.0.5。

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

如果您在Chrome / FireFox Windows / Recent IE版本中运行此功能并点击绿色叠加层，视频将会播放，您将听到音乐。
注意：当然，在我的真实页面中，我会捕获isplaying事件并隐藏叠加层。

Firefox显然正在进行某种点击劫持保护。如果它认为您试图通过视频覆盖用户欺骗用户，则它将无法播放。然而，对我来说真的很奇怪，它在Windows上也不会这样做。

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

如果您点击“将不透明度更改为75％”，则会在下方显示视频。如果你然后点击它然后它会播放就好了。
如果点击“将叠加设置为较小”，则会使叠加层无法完全覆盖视频。点击它然后就可以了。

最奇怪的是 - 当你在iframe中查看它时效果很好（这就是为什么我使用上面的GoogleDrive link打开全屏）而不是像codepen / jsfiddle {{3 }}

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

PS。显然，没有pointer-events的浏览器必须以点击事件的方式区别对待。这个例子没有显示。

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

Answer 1

我得到了同样的问题Firefox Mac（并且尚未升级到优胜美地），但在我看来，你已经解决了自己的问题。我能看到的最简单的解决方案是在你当前的一个下方添加一个额外的覆盖层，并将它们设置为不透明度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-served iframe中没有... ??

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

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

仍然没有找到原因，但如果我在我的localhost框架上启用上述内容，它就会开始工作而不需要不透明技巧。我想它必须导致Firefox通过不同的进程，或者它只是禁用某种跨源点击劫持保护。

非常奇怪的事情......这是我对Chrome的期望！不好的ol＆＃39; Firefox浏览器。

Firefox Mac可防止播放叠加视频

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

1 个答案:

更新