我试图阻止 Mobile Safari 上包含 HTML5 视频元素的 Web 应用程序内的默认滚动。处理
document.ontouchmovee.preventDefault()这似乎在任何地方都有效，除了当您触摸视频元素顶部时，您可以开始向四周拉动页面，就好像它要滚动一样。这似乎只有在强制启用本机视频控件时才会发生。如果您不包含controls属性并以可以在线播放的方式加载视频（例如在iPad上或在设置了allowsInlineMediaPlayback的UIWebView中），则会正确阻止滚动。所以看起来它与捕获事件的本机视频控件（大播放按钮）有关。
这是我正在做的一个人为的例子：
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Video Example</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
</head>
<body style="background: blue;">
<video src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v" controls></video>
<script>
window.onload = function() {
document.ontouchmove = function(e) {
e.preventDefault();
}
}
</script>
</body>
</html>
有什么解决方法可以完全禁止滚动行为，即使在视频上也是如此？我已经尝试过直接在视频元素上处理
ontouchmove谢谢！
在我的测试中，当省略视频的“控件”属性时，您可以使事件正常工作。在顶部使用自定义 div 来提供自定义控件
举例....
<video src="http://192.168.1.53/videoTester/Cuatro.mp4" id="player" width="100%" height="100%" x-webkit-airplay="allow" ></video>
和你一样，我无法阻止滚动，因此作为解决方法，添加了一个 JS 函数来每秒触发
window.scrollTo(0, 1);尝试：
element.addEventListener('touchmove', function(event) {
// Prevent scrolling on this element
event.preventDefault();
}, false);
仅针对有问题的元素或：
window.addEventListener('touchmove', function(event) {
// Prevent scrolling on this element
event.preventDefault();
}, false);
整个窗口。
在遇到同样的问题后，我想出了一个很好的解决方案。我通过执行以下操作使其正常工作：
//Function to trigger when every half second to check if user scrolled
$(function () {
//select video player and the current time
var myPlayer = document.getElementById('VideoID');
var whereYouAt = myPlayer.currentTime;
var current;
setInterval(function () {
current = myPlayer.currentTime;
if (current > (whereYouAt + 1)) {
myPlayer.currentTime = whereYouAt; //If current 1 whole second
//Set time to before scroll.
}
else {
whereYouAt = current; //otherwise set where to current.
}
}, 500); //500 = half a second.
});
这仅适用于 HTML5 视频，如果触发移动视频播放器则无效。我希望这对您有所帮助，如果您有任何疑问，请告诉我。
要在 iOS 设备的 HTML 视频上启用触摸控制，您可以使用
controlscontrols这是一个仅使用 HTML 的简单示例：
<video src="..." controls></video>
使用 JavaScript：
export function isIOS() {
return (
// iPad on iOS 13+ detection
(navigator.userAgent.includes('Mac') && 'ontouchend' in document) ||
// Other iOS device detection
/iPad|iPhone|iPod/.test(navigator.userAgent)
);
}
export function fixVideoCantScroll(element: HTMLVideoElement, enableControl = false) {
if (!isIOS()) return;
element.setAttribute('controls', 'true');
if (enableControl) return;
element.removeAttribute('controls');
}
二手：
const videoSelector = document.querySelector('video');
fixVideoCantScroll(videoSelector);