需要滑动到#video时视频开始播放，并且用滑动控制视频播放进度，下滑快进，上滑后退！！
<div style="width:100%;height:1000px;">
</div>
<div style="width:100%;height:1000px;">
</div>
<div style="width:100%;height:1000px;">
</div>
<div id="video">
<video src="https://cdn.shopify.com/videos/c/o/v/93972f7b220a4c0aa2ed7b1df1730c00.mp4"></video>
</div>
<div style="width:100%;height:1000px;">
</div>
<div style="width:100%;height:1000px;">
</div>
分享
用滑动控制视频的currentTime 属性设置视频播放的当前位置（以秒计）即可
参考
HTML Audio/Video DOM currentTime 属性
https://www.w3school.com.cn/tags/av_prop_currenttime.asp
播放进度，下滑快进，上滑后退代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<div style="width: 300px;">
<div style="width:100%;height:1000px;">
</div>
<div style="width:100%;height:1000px;">
</div>
<div style="width:100%;height:1000px;">
</div>
<div id="video">
<video controls style="width: 100%;" src="https://cdn.shopify.com/videos/c/o/v/93972f7b220a4c0aa2ed7b1df1730c00.mp4"></video>
</div>
<div style="width:100%;height:1000px;">
</div>
<div style="width:100%;height:1000px;">
</div>
</div>
<script type="text/javascript">
var topdv = 0;
window.addEventListener("scroll",function(event) {
var video = document.querySelector("#video video");
var r = video.getBoundingClientRect();
var scrollTop = (document.documentElement.scrollTop || document.body.scrollTop);
if (r.top>=0 && r.bottom<=window.innerHeight) {
if (video.paused)
try {
video.play();
} catch(eo){}
if (scrollTop>topdv && video.currentTime < video.duration) {
video.currentTime += 0.1;
}
if (scrollTop<topdv && video.currentTime > 0) {
video.currentTime -= 0.1;
}
topdv = scrollTop;
} else {
if (video.played)
try {
video.pause();
} catch(eo){}
}
});
</script>
</body>
</html>
如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!
分享
系统已结题
8月5日
已采纳回答
7月28日
创建了问题
7月10日
