页面滚动时，js控制多个视频的播放方法

最新推荐文章于 2025-05-27 15:30:06 发布

原创最新推荐文章于 2025-05-27 15:30:06 发布 · 3.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#滚动 #控制 #视频播放

前端应用专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一种实现网页中仅当前可见视频自动播放而其余暂停的效果的方法。通过编写一段JavaScript脚本，可以确保当用户滚动页面时，仅显示在视口顶部的视频会自动播放，而其他未完全进入视口的视频则会被暂停。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很多应用里有个视频播放的控制效果，就是页面滚动时，只有全部显示在窗口里的最上面一个自动播放，其他都停止播放。

今天客户也要求在我们的项目里使用这个效果，于是写了一个脚本，现在贴出来给大家参考一下，对比网上其他的脚本，我这个应该算是效率比较高的，因为没有做多余的重复计算取值。

<script type="text/javascript">
    var videoList = $('video');
    var wHeigt = window.innerHeight;
    for(var i = 0; i < videoList.length; i++){
        var v = videoList[i];
        v.height = $(v).height();
        v.top = $(v).offset().top;
    }
    //sTop加50，是考虑页头的高度，遮档了内容的可视区，这点大家灵活处理
    $(document).on('scroll.blogDetail', function(){
        var sTop = $(document).scrollTop();
        var hasPlay = false;
        for(var i = 0; i < videoList.length; i++){
            var v = videoList[i];
            if(!hasPlay && v.top  > (sTop + 50) && (wHeigt + sTop) > (v.top + v.height)){
                v.play();
            }else{
                v.pause();
            }
        }
    });
</script>