视频标签后触控事件在 iPad 上停止工作

Question

我有一个应用程序，可以让您左右滑动来查看不同的屏幕，或者单击“下一个”和“上一个”按钮进行导航。

if(isMobile){
    detectSwipe = true;
    document.addEventListener('touchstart',TouchStart,false);
    document.addEventListener('touchmove',TouchMove,false);
    document.addEventListener('touchend',TouchEnd,false);
    document.addEventListener('touchend',TouchCancel,false);
}

$("#prevBtn").on('touchstart click', function () { 
    ...
}

问题是由于某种未知原因，当它到达带有视频标签的屏幕时，所有按钮都变得无法点击，只有滑动事件仍然处于活动状态。这只发生在 iPad 上，但在桌面上可以正常工作。

<video width="960" height="560">
    <source src="video.mp4" type="video/mp4"/>
    <source src="video.ogg" type="video/ogg"/>
    <source src="video.webm" type="video/webm"/>
    Your browser does not support the video tag.
</video>

我也尝试使用嵌入 youtube 视频而不是视频标签，但问题仍然存在。

Answer 1

您必须将视频元素的控件设置为 false 并设置您自己的控件，它才能工作。