视频网站序列帧的简单实现

DEMO

用到的知识

• FFMPEG ：生成序列帧用到的图片，这里只用宽长图演示
• JS
• HTML
• CSS

准备材料

1. 一个mp4文件
2. 基于mp4使用FFMPEG生成一张长图

编写序列帧展示

 <!-- 展示区域 -->
    <div id="container">
        <video id="video" controls>
            <source src="guoge.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div id="imageSequence">
          
            <img src="/storage/editor-images/20231125/656214698e2d5.jpg" alt="Image Sequence" style="width: 100%; height: 100%;">
        </div>
        <div id="mouseIndicator"></div>
    </div>

JS计算鼠标变动和截取对应图片进行展示

const container = document.getElementById('container');
    const video = document.getElementById('video');
    const imageSequence = document.getElementById('imageSequence');
    const mouseIndicator = document.getElementById('mouseIndicator');

    // 获取宽长图的宽度
    const imageWidth = imageSequence.offsetWidth;

    container.addEventListener('mousemove', function (event) {
        // 计算鼠标距离容器左侧的距离
        const distanceFromLeft = event.clientX - container.offsetLeft;
        // 计算鼠标距离左侧的距离在容器宽度中的百分比
        const percentage = (distanceFromLeft / container.offsetWidth) * 100;

        // 计算当前百分比所在的图片索引 -- 添加包含24个图片的宽长图 ，演示进行特定处理
        const imageIndex = Math.floor((percentage / 100) * 23); // 减去1，避免最后一张图片与前一张重合

        // 设置裁剪的位置
        const clipPosition = (imageIndex / 23) * (imageWidth - container.offsetWidth);
        imageSequence.style.transform = `translateX(-${clipPosition}px)`;

        // 如果鼠标在视频框内，显示图像，否则显示视频
        const isMouseInside = event.clientX >= container.offsetLeft && event.clientX <= container.offsetLeft + container.offsetWidth &&
            event.clientY >= container.offsetTop && event.clientY <= container.offsetTop + container.offsetHeight;

        imageSequence.style.opacity = isMouseInside ? 1 : 0;
        video.style.opacity = isMouseInside ? 0 : 1;

        // 更新鼠标指示器的位置
        mouseIndicator.style.left = `${distanceFromLeft}px`;
        mouseIndicator.style.opacity = isMouseInside ? 1 : 0;

        // 设置鼠标样式为手指样式
        container.style.cursor = isMouseInside ? 'pointer' : 'auto';
    });

    // 鼠标移出时，隐藏图像和指示器，显示视频
    container.addEventListener('mouseleave', function () {
        imageSequence.style.opacity = 0;
        mouseIndicator.style.opacity = 0;
        video.style.opacity = 1;
        // 恢复默认鼠标样式
        container.style.cursor = 'auto';
    });