我的主页上有图片,当您点击它时会播放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版本的点击阻止的不透明度阈值不同.
.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.
