西西木科技丨Shopify开发机构 2022-07-10 21:29 采纳率: 96.4%
浏览 89
已结题

用滑动控制视频播放进度

需要滑动到#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>

  • 写回答

2条回答 默认 最新

  • 关注

    用滑动控制视频的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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月5日
  • 已采纳回答 7月28日
  • 创建了问题 7月10日

悬赏问题

  • ¥15 AttributeError: 'NoneType' object has no attribute 'drop_duplicates'报错
  • ¥15 编写c++计算器,用类和栈来做,要求如下
  • ¥15 以下代码,运行结果报错
  • ¥15 Vivado仿真数据出错
  • ¥15 银河麒麟不支持vant等前端框架怎么办?
  • ¥15 vue3的子组件在父页面调用不显示不生效问题
  • ¥15 cadence PEX
  • ¥15 phython创建了文件 显示在项目下面,但运行不了,运行时还是运行main文件,并且说main文件不允许并行运行
  • ¥20 C++哈希表的设计构造哈希表
  • ¥15 FutureWarning:不推荐使用空或全 NA 条目的 DataFrame 串联行为。怎么改呢?