可以在一个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>
网友回复
我知道答案，我要回答
私活外包
最新提问
有没有免费让ai自动帮你接管操作电脑的mcp服务？
mcp为啥用Streamable HTTP 替代 HTTP + SSE？
scratchjr有没有开源的前端html网页版本源代码？
多模态大模型能否根据ui交互视频来来模仿写出前端交互动画效果ui代码？
如何用阿里云oss+函数计算fc+事件总线EventBridge+消息队列+数据库+redis缓存打造一个高并发弹性系统？
阿里云函数计算 FC如何在海外节点搭建一个代理网络？
ai studio中gemini build的代码如何发布到github pages等免费网页托管上 ？
如何在cursor、qoder、trae中使用Claude Skills功能？
有没有不用u盘就能重装系统的开源工具？
python如何固定摄像头实时计算停车场停车位剩余数量？
