GSAP实现滚动切换视频帧

在这篇博客中,我们将介绍如何使用 HTML、CSS 和 JavaScript 来创建一个网页,其中包含一个视频容器,用户可以通过滚动页面来控制视频的播放进度。这种滚动控制视频的效果常用于网页设计,以提供更吸引人的用户体验或展示创意的视觉效果。

HTML 结构:

首先,我们创建了基本的 HTML 结构,包括一个视频容器和一个加载图标。视频容器用于承载视频,加载图标则在视频加载时显示加载动画。

<div class="video-container" id="video-container">
        <video id="video" muted src="视频链接" playsinline preload="auto" type="video/webm/mp4"></video>
        <!-- 视频未加载完成时候的加载图标 -->
        <div id="loading-icon" class="loading-icon">
            <img src="https://wimg.588ku.com/gif620/21/03/20/dd927f59d06392c3cc56cb2354f00934.gif" alt="Loading">
        </div>
    </div>
CSS 样式:

我们使用 CSS 样式来定义视频容器和加载图标的外观,以确保它们在页面上正确显示。

<style>
        .video-container #video {
            width: 100%;
            height: auto;
        }
        .video-container{
            position: relative;
        }
        .video-container .loading-icon{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }
        .video-container .loading-icon img{
            width: 8%;
            display: flex;
            margin: 0 auto;
        }
    </style>
JavaScript 功能:

使用 JavaScript,我们实现了以下功能来使视频滚动控制成为可能:

  1. 获取视频元素并创建用于控制视频播放的 GSAP 动画。

  2. 监听视频元数据加载完成的事件,一旦加载完成,就启用页面滚动、隐藏加载图标,获取视频的总时长,并设置滚动触发器。

  3. 使用 ScrollTrigger 插件,实现滚动时根据滚动位置来控制视频的播放进度。

  4. 通过计算滚动位置,确定应该显示视频的哪一帧,然后设置视频的当前时间以实现滚动控制效果。

<script>
        // 获取视频元素
        const videoElementBanner = document.querySelector(".video-container #video");
        let gsapPart = ""; // GSAP 动画部分
    
        // 阻止滚动
        function disableScroll() {
            document.body.style.overflow = "hidden"; // 隐藏垂直滚动条
        }
        disableScroll();
    
        // 启用滚动
        function enableScroll() {
            document.body.style.overflowY = "auto"; // 启用垂直滚动条
            document.body.style.overflowX = "clip"; // 水平滚动条保持不变
        }
    
        // 当视频元数据加载完成后执行以下操作
        videoElementBanner.addEventListener("loadedmetadata", () => {
            // 启用滚动
            enableScroll();
    
            // 隐藏加载图标
            const loadingIcon = document.getElementById("loading-icon");
            loadingIcon.style.display = "none";
    
            const videoDuration = videoElementBanner.duration; // 视频总时长
            const pixelsPerFrame = 20; // 每滚动20像素切换一帧视频
            const frameCount = videoDuration * 60; // 视频的总帧数
    
            // 计算总的滚动距离
            const totalScrollDistance = (frameCount - 1) * pixelsPerFrame;
    
            // 创建 ScrollTrigger 动画
            gsapPart = gsap.timeline({
                scrollTrigger: {
                    trigger: "#video-container", // 触发器元素
                    start: "top top", // 触发滚动的位置
                    end: () => `+=${totalScrollDistance}`, // 触发器结束位置
                    scrub: true, // 启用滚动擦除效果
                    pin: true, // 固定滚动元素
                    onUpdate: (self) => {
                        // 获取当前滚动位置
                        const scrollY = self.progress * totalScrollDistance;
    
                        // 计算当前帧的索引
                        let targetFrame = Math.floor(scrollY / pixelsPerFrame);
    
                        // 限制 targetFrame 在合法范围内
                        targetFrame = Math.min(frameCount - 1, Math.max(0, targetFrame));
    
                        // 计算当前帧对应的时间
                        const targetTime = (targetFrame / frameCount) * videoDuration;
    
                        // 更新视频的当前时间
                        if (!isNaN(targetTime) && isFinite(targetTime)) {
                            videoElementBanner.currentTime = targetTime;
                        }
                    },
                },
            });
        });
    </script>

这个功能的目的是提供一种交互式的方式来控制视频的播放,用户可以通过滚动页面来前进、后退,从而增强用户体验或展示创意视觉效果。

结论:

在本文中,我们已经展示了如何创建一个具有视频滚动控制功能的网页。这是一个强大的工具,可以用来提升网页设计的吸引力,并为用户提供更多的交互性。如果你希望在你的网站上增加类似的功能,只需按照本文提供的代码和说明进行操作即可。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值