用滑动控制视频播放进度

需要滑动到#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 属性设置视频播放的当前位置（以秒计）即可
参考

播放进度，下滑快进，上滑后退代码如下：

<!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>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

img

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632