搜索

回答

可以在一个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>

网友回复

我知道答案，我要回答

我有问题

回答

如何将linux服务器的文件目录映射到windows电脑磁盘？

Docling 与 MarkItDown 两个库有啥不同？

豆包收费后国产其他ai软件也会跟进收费吗？

JPEG 与 HEIF图片格式区别？

centos7版本太旧无法安装python3.11，如何在docker中运行python3.11？

python如何做个RPA按键精灵的程序？

写一个windows的cmd的python代码如何在命令行中捕获获取复制粘贴的图片？

如何将别人爆款的抖音短视频短剧文案提取为seedance2的提示词？

阿里云域名dns云解析10万次日限额如何应对？

windows电脑如何提交上架ipa苹果应用？