h5实现抖音短视频全屏滑动播放效果

h5实现抖音短视频全屏滑动播放效果

h5实现抖音短视频全屏滑动播放效果

短视频的火热带动了一批自媒体,不管你是平民百姓,还是名人,都可以拍摄短视频发布的短视频平台上,配上音乐、滤镜、文字,达到一种搞笑、励志的效果,那么短视频的平台一般都是通过app来展示的,为啥呢,因为app的体验比较流畅,用户体验较好,那么h5的爱好者要说了,虽说短视频只能在app上展示,我们h5也是可以的,的确,h5的发展也很快,而且也在大量吞噬原生app的市场,想微信的刚推出的小程序框架WMPF,无需微信,就可将小程序运行在各大Android移动设备上,而且体验也很不错,与原生app不相上下,好了,今天我们来通过h5来演示一下如何编写出类似短视频首页滑动滚动播放视频的效果。

效果如下

h5实现抖音短视频全屏滑动播放效果

原理其实简单

就是设置一个div,内部放上一堆video,然后div设置高度与宽度满屏,最后设置overflow-x:scroll就好了

 <style type="text/css" media="all">
        * {
            padding: 0;
            margin: 0;
        }
        #cont {
            height: 100vh;
            width: 100vw;
            overflow-y: scroll;
        }
    </style>

    <div id="cont">
        <video src="http://repo.bfw.wiki/bfwrepo/video/5e192efa3598c.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>
        <video src="http://repo.bfw.wiki/bfwrepo/video/5e192eec3d70a.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>
        <video src="http://repo.bfw.wiki/bfwrepo/video/5e192efa3598c.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>
</div>

布局完了,那么视频的滚动黏吸效果是怎么实现的呢,主要通过scrolltop的判断,结合网页可视高度进行相除,最后ceil一下就好了

 <script type="text/javascript">
        var autogo = false;//是否还在滚动中,如果滚动中就不执行play
        var lastscrolltop = 0;//上一次的scrolltop
        bready(function() {
            play();
            $("#cont").scroll(function(event) {
                play();
            })
        });
        function play() {
            if (autogo) {
                return;
            }
            var scrolltop = $("#cont").scrollTop();
            var winheight = $(window).height();
            //获取第几个视频
            var indexvideo = Math.ceil(scrolltop/winheight);
            if (scrolltop < lastscrolltop) {
                //上翻
                indexvideo--;

            }
            autogo = true;
            $("#cont").animate({
                scrollTop: indexvideo*winheight
            }, 300, function() {
                lastscrolltop = indexvideo*winheight;
                autogo = false;

            });
            console.log("播放"+indexvideo);
            $("#cont video").eq(indexvideo).trigger("play");
            $("#cont video").eq(indexvideo).siblings().trigger("pause");
        }
    </script>

那么滚动到第几个视频就播放第几个视频,之前的视频就暂停播放是怎么实现的呢,这里还是通过scrolltop与网页可视高度来判断第几个video,最后触发play,完整的html代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var autogo = false;//是否还在滚动中,如果滚动中就不执行play
        var lastscrolltop = 0;//上一次的scrolltop
        bready(function() {
            play();
            $("#cont").scroll(function(event) {
                play();
            })
        });
        function play() {
            if (autogo) {
                return;
            }
            var scrolltop = $("#cont").scrollTop();
            var winheight = $(window).height();
            //获取第几个视频
            var indexvideo = Math.ceil(scrolltop/winheight);
            if (scrolltop < lastscrolltop) {
                //上翻
                indexvideo--;

            }
            autogo = true;
            $("#cont").animate({
                scrollTop: indexvideo*winheight
            }, 300, function() {
                lastscrolltop = indexvideo*winheight;
                autogo = false;

            });
            console.log("播放"+indexvideo);
            $("#cont video").eq(indexvideo).trigger("play");
            $("#cont video").eq(indexvideo).siblings().trigger("pause");
        }
    </script>
    <style type="text/css" media="all">
        * {
            padding: 0;
            margin: 0;
        }
        #cont {
            height: 100vh;
            width: 100vw;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div id="cont">
        <video src="http://repo.bfw.wiki/bfwrepo/video/5e192efa3598c.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>
        <video src="http://repo.bfw.wiki/bfwrepo/video/5e192eec3d70a.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>
        <video src="http://repo.bfw.wiki/bfwrepo/video/5e192efa3598c.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>

    </div>

</body>
</html>

当然如果要考虑到一直滚动下去,就要不停的在后端增加video标签


{{collectdata}}

网友评论0

阿里云香港主机,免备案大优惠 打开浏览器开发html,体验云开发的乐趣bfweditor 打开浏览器即可开发php,bfwstudio
其他文章