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

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

短视频的火热带动了一批自媒体，不管你是平民百姓，还是名人，都可以拍摄短视频发布的短视频平台上，配上音乐、滤镜、文字，达到一种搞笑、励志的效果，那么短视频的平台一般都是通过app来展示的，为啥呢，因为app的体验比较流畅，用户体验较好，那么h5的爱好者要说了，虽说短视频只能在app上展示，我们h5也是可以的，的确，h5的发展也很快，而且也在大量吞噬原生app的市场，想微信的刚推出的小程序框架WMPF，无需微信，就可将小程序运行在各大Android移动设备上，而且体验也很不错，与原生app不相上下，好了，今天我们来通过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="//repo.bfw.wiki/bfwrepo/video/5e192efa3598c.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>
        <video src="//repo.bfw.wiki/bfwrepo/video/5e192eec3d70a.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>
        <video src="//repo.bfw.wiki/bfwrepo/video/5e192efa3598c.mp4" muted loop style="width:100%; height:100%; object-fit:fill;" webkit-playsinline playsinline></video>
</div>

 <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 winheigh...

点击查看剩余70%