前端实现视频Banner + 滚屏视频

效果图：

贴代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频 Banner 示例</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
        }

        .video-banner {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        #video-background {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            z-index: -1;
            transform: translate(-50%, -50%);
        }

        .video-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: white;
            z-index: 1;
        }

        .video-content h1 {
            font-size: 3em;
            margin: 0;
        }

        .video-content p {
            font-size: 1.5em;
            margin: 10px 0 30px;
        }

        .video-content .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #662d91;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.2em;
            transition: background-color 0.3s ease;
        }

        .video-content .btn:hover {
            background-color: #50247a;
        }

    </style>
</head>

<body>
    <header class="video-banner">
        <video autoplay muted loop id="video-background">
            <source src="./assets/1080p.mp4" type="video/mp4">
            您的浏览器不支持 video 标签。
        </video>
        <div class="video-content">
            <h1>欢迎来到立桥银行</h1>
            <p>立足港澳，桥连世界</p>
            <a href="#more" class="btn">了解更多</a>
        </div>
    </header>
</body>

</html>

滚屏视频

贴代码：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚屏动画视频示例</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }

        .scroll-video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        #scroll-video {
            position: absolute;
            top: 50%;
            left: 50%;
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            object-fit: cover;
        }

        #content {
            height: 1000px;
            /* 调整高度以适应滚动 */
            overflow-y: scroll;
            scroll-behavior: smooth;
        }

        .section {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .section h1 {
            font-size: 3em;
            margin: 0;
        }

        .section p {
            font-size: 1.5em;
            margin: 10px 0 30px;
        }
    </style>
</head>

<body>
    <div class="scroll-video-container">
        <video id="scroll-video" src="./assets/section-3-desktop-900-264-crf-20-g-1.mp4" muted></video>
    </div>

    <section id="content">
        <div class="section" id="section1">
            <h1>欢迎来到立桥银行</h1>
            <p>立足港澳，桥连世界</p>
        </div>
        <div class="section" id="section2">
            <h1>我们的服务</h1>
            <p>提供多种金融服务，满足您的需求</p>
        </div>
        <div class="section" id="section3">
            <h1>联系我们</h1>
            <p>了解更多详情，请联系我们</p>
        </div>
    </section>

    <script>

        document.addEventListener('DOMContentLoaded', () => {
            const video = document.getElementById('scroll-video');
            const content = document.getElementById('content');
            const totalHeight = content.scrollHeight - window.innerHeight;
            let lastScrollTop = 0;
            let timeoutId;

            content.addEventListener('scroll', () => {
                const scrollPosition = content.scrollTop / totalHeight;
                const videoDuration = video.duration;
                const currentTime = scrollPosition * videoDuration;

                // 播放视频
                video.currentTime = currentTime;
                video.play();

                // 清除之前的定时器
                clearTimeout(timeoutId);

                // 设置一个新的定时器，在用户停止滚动后暂停视频
                timeoutId = setTimeout(() => {
                    video.pause();
                }, 100); // 100毫秒后暂停视频
            });
        });
    </script>
</body>

</html>