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标签
{{collectdata}}
网友评论0