可以在一个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>
网友回复
我知道答案，我要回答
私活外包
最新提问
python如何调用openai的api实现知识讲解类动画讲解视频的合成？
html如何直接调用openai的api实现海报可视化设计及文本描述生成可编辑海报？
f12前端调试如何找出按钮点击事件触发的那段代码进行调试？
abcjs如何将曲谱播放后导出mid和wav格式音频下载？
python如何将曲子文本生成音乐mp3或wav、mid文件
python中mp3、wav音乐如何转成mid格式？
js在HTML中如何将曲谱生成音乐在线播放并下载本地？
python如何实现在windows上通过键盘来模拟鼠标操作？
python如何给win10电脑增加文件或文件夹右键自定义菜单？
python如何将音乐mp3文件解析获取曲调数据？
