可以在一个div中放三个视频，第一个视频显示，第二第三个视频overflow：hidden，然后设置可滚动，对滚动进行scrolltop侦测，一旦发现到最后一个视频，就插入一个新视频video
实现滚动,示例代码如下
<!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;
var lastscrolltop = 0;
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>
网友回复
我知道答案，我要回答
私活外包
最新提问
DLNA与UPnP的区别和不同？
苏超自建抢票app，通过先预约再抽签化解高并发抢票？
python如何让给电脑在局域网中伪装成电视接收手机的投屏图片视频播放？
如何结合python+js如何自己的视频编码与加密播放直播？
python如何在电脑上通过局域网将本地视频或m3u8视频投屏电视播放？
腾讯视频爱奇艺优酷vip电影电视剧视频如何通过python绕过vip收费直接观看？
有没有可免费观看全球电视台直播m3u8地址url的合集？
有没有实现观影自由的免vip影视苹果 CMS V10 API的可用url？
python如何实时检测电脑usb插入检测报警？
如何判断真人操作的鼠标移动直线轨迹与机器操作的轨迹？
