js 获取mp4某一帧图片

发布于 2025-02-04 21:39:23

在 JavaScript 中获取 MP4 视频文件的某一帧图片，可以使用 HTML5 Video 元素配合 Canvas 元素来实现。基本的步骤是加载视频，暂停到你想提取帧的位置，然后将该帧绘制到 C...

在 JavaScript 中获取 MP4 视频文件的某一帧图片，可以使用 HTML5 Video 元素配合 Canvas 元素来实现。基本的步骤是加载视频，暂停到你想提取帧的位置，然后将该帧绘制到 Canvas 上，最后可以将 Canvas 转换为图像或下载为图片。

以下是一个简单的实现示例：

步骤：

使用 <video> 元素加载 MP4 文件。
使用 <canvas> 元素来捕获并绘制视频的当前帧。
在视频暂停时，使用 canvas 来获取图像数据。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extract Frame from MP4 Video</title>
</head>
<body>
    <video id="video" controls>
        <source src="your-video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <canvas id="canvas" style="display:none;"></canvas>

    <img id="output" alt="Extracted Frame" />

    <script>
        // 获取视频、画布和输出图像元素
        const video = document.getElementById('video');
        const canvas = document.getElementById('canvas');
        const output = document.getElementById('output');
        const ctx = canvas.getContext('2d');

        // 当视频可以播放时，开始处理
        video.addEventListener('canplay', () => {
            // 设置画布尺寸为视频尺寸
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
        });

        // 获取视频的某一帧
        function captureFrame(time) {
            // 跳转到特定时间（单位：秒）
            video.currentTime = time;

            // 等待视频跳转到指定时间，然后捕获当前帧
            video.addEventListener('seeked', function onSeeked() {
                // 将当前帧绘制到画布上
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

                // 将画布内容转为图片URL，并显示
                const imgURL = canvas.toDataURL('image/png');
                output.src = imgURL;

                // 移除事件监听器，以防止多次触发
                video.removeEventListener('seeked', onSeeked);
            });
        }

        // 捕获某一秒的帧
        captureFrame(5);  // 捕获视频中的第5秒的帧
    </script>
</body>
</html>