GSAP实现滚动切换视频帧

qwerty843

已于 2023-10-11 17:25:10 修改

阅读量294

点赞数

文章标签：音视频

于 2023-10-11 13:55:47 首次发布

本文链接：https://blog.csdn.net/weixin_60886119/article/details/133768430

版权

在这篇博客中，我们将介绍如何使用 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，我们实现了以下功能来使视频滚动控制成为可能：

获取视频元素并创建用于控制视频播放的 GSAP 动画。
监听视频元数据加载完成的事件，一旦加载完成，就启用页面滚动、隐藏加载图标，获取视频的总时长，并设置滚动触发器。
使用 ScrollTrigger 插件，实现滚动时根据滚动位置来控制视频的播放进度。
通过计算滚动位置，确定应该显示视频的哪一帧，然后设置视频的当前时间以实现滚动控制效果。

<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>

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