Touch VideoJS post frame播放按钮在模式和固定页脚后面触控触发

Touch VideoJS post frame播放按钮在模式和固定页脚后面触控触发,touch,html5-video,event-propagation,Touch,Html5 Video,Event Propagation,我有一个网站,我有一个视频JS视频嵌入在页面中。同样在页面上,我有一个固定的页脚,偶尔还有一个模式窗口覆盖,在点击链接时出现。所有这些都可以在台式机上运行,但在移动设备上,.vjs大播放按钮上的触摸事件会在视频位于固定页脚后面或模式后面时触发 我以前处理过这个问题,我想已经解决了,但我似乎不知道如何预防它。有人遇到过这个吗。在我对互联网的研究中,我很难找到解决方案:) 谢谢 DaveiPad浏览器做了一件奇怪的事情,当视频元素的本机控件被启用时,所有触摸或点击事件都会被视频元素捕获,而不管它上面

我有一个网站,我有一个视频JS视频嵌入在页面中。同样在页面上,我有一个固定的页脚,偶尔还有一个模式窗口覆盖,在点击链接时出现。所有这些都可以在台式机上运行,但在移动设备上,.vjs大播放按钮上的触摸事件会在视频位于固定页脚后面或模式后面时触发

我以前处理过这个问题,我想已经解决了,但我似乎不知道如何预防它。有人遇到过这个吗。在我对互联网的研究中,我很难找到解决方案:)

谢谢


Dave

iPad浏览器做了一件奇怪的事情,当视频元素的本机控件被启用时,所有触摸或点击事件都会被视频元素捕获,而不管它上面是什么。除了禁用本机控件并构建自己的控件之外,您实际上无法使用脚本来解决这个问题

Video.js带有自定义控件而不是本机控件,但在iPad上运行时除外,因为():

现在在移动设备上使用本机控件是有意的选择,因为HTML控件在完全可用之前需要一些修饰。我们有一个在手机上运行良好的皮肤版本,我们将很快移植其中一些变化

因此,您需要强制Video.js使用HTML控件,我相信您可以通过设置
nativecontrollsfortouch
选项来实现,如下所示:

<video class="video-js vjs-default-skin vjs-my-personal-skin" controls preload="auto" data-setup="{nativeControlsForTouch: true}"></video>


注意添加了
控件
属性和
数据设置中的选项

,非常感谢您的回复。使用nativeControlsForTouch实际上使本机外观和功能完全相同,桌面视图下面有一个控制栏。我想这可能是一个选项,但当我尝试在手机上测试它时,我仍然可以从固定页脚后面点击视频。我能够通过在打开模式时隐藏视频部分解决我的问题。我仍然有这个问题,当视频后面的固定页脚。我想我可以把录像藏起来(当视频位于某个X位置时,替换为假海报框。嗯。抱歉,我想我搞砸了。请尝试NativeControl Fortouch:False让我知道这是否有效,我会更新答案。不,我很抱歉这是相同的结果。我仍然能够通过固定页脚点击它后面的视频。感谢您提出解决方案,但不幸的是,这不起作用。