我试图将播放作为滚动视频，我在 codepen 上找到了这段代码，我编辑了一点以使其适用于我的电脑。现在它在电脑上运行良好，视频在我滚动时播放。但是在 iPad 上，当我滚动视频时，视频会像我想要的那样滚动播放，但是当我停止滚动（从屏幕上松开手指）时，视频会以与视频开头相反的方式播放。
这是我编辑的代码。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play as Scroll Video</title>
<style>
#set-height {
display: block;
}
#v0 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
p font-family helvetica {
font-size: 24px;
}
</style>
<script>
window.onload = function () {
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 500,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function () {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay() {
var frameNumber = window.pageYOffset / playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
};
</script>
</head>
<body>
<div id="set-height"></div>
<p id="time"></p>
<video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""
src="https://www.apple.com/media/us/mac-pro/2013/16C1b6b5-1d91-4fef-891e-ff2fc1c1bb58/videos/macpro_main_desktop.mp4">
</source>
</video>
</body>
</html>
起初我认为可能是因为视频的类型或编解码器，所以我尝试了 mp4 和 WebM，我也尝试更改视频的编解码器，但它并没有解决我的问题。所以，现在我认为这可能与视频无关。