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="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标签
网友评论0