html – Firefox Mac阻止播放叠加视频

前端之家收集整理的这篇文章主要介绍了html – Firefox Mac阻止播放叠加视频前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
不幸的是,只有当您直接点击YouTube播放器本身时,YouTube才会对视频进行统计.这是为了防止欺诈性的高视图计数.如果你不想最初展示YouTube播放器的一种技巧是在顶部放置一个不透明的叠加层和图形,使用指针 – 事件:无.当用户点击您的叠加层时,他们实际上会点击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 http://codepen.io/anon/pen/GgrZNN这样的东西

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

PS.显然,没有指针事件的浏览器必须以点击事件的方式区别对待.这个例子中没有显示.

(我正在使用Browserstack.com进行测试,但它在真正的mac上也是如此.)

解决方法

我得到了同样的问题Firefox Mac(并且尚未升级到优胜美地),但在我看来,你已经解决了自己的问题.我能看到的最简单的解决方案是在当前的一个下方添加一个额外的覆盖层,并将它们设置为不透明度0.98(这似乎是你可以去的最高点,但仍然有点击工作 – 至少在我的测试中).

显然它取决于你希望在你的叠加层上展示什么,但对于我在本地的测试,我将底层叠加(对不起,荒谬的名字)设置为黑色.这意味着下面的视频难以察觉.你可能甚至可以用不透明度降低一点,并且仍然用两层阻止所有内容,以防万一版本的Firefox版本的点击阻止的不透明度阈值不同.

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

.x-under-overlay {
  opacity: 0.98;
  position: absolute;
  background: rgba(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有着怪异的相似之处.

为什么[在这里插入home planet]为Codepen做了这个工作,但是在我自己的localhost-served iframe中没有…

在尝试了许多不同的东西之后,我发现了沙箱属性,我之前应该注意到它;特别考虑到所有奇怪的技巧,它可以启用和禁用本机浏览器进程.稍后快速试用和一些错误,似乎允许这对大多数在线代码小提琴手起作用的是以下内容

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

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

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

原文链接:https://www.f2er.com/html/225834.html

猜你在找的HTML相关文章