js截取视频第一帧

香辣鱼干

已于 2024-06-20 17:21:29 修改

阅读量628

点赞数 4

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 音视频开发语言

于 2024-06-08 17:13:02 首次发布

本文链接：https://blog.youkuaiyun.com/qiaolezi787/article/details/139548617

js 专栏收录该内容

5 篇文章

订阅专栏

使用canvas截取视频第一帧方法.

extractVideoFrame方法,代码核心部分有注释讲解已经封装好了，直接copy到你们项目中使用即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 32px;
        }
    </style>
</head>

<body>
    <input type="file" accept="video/mp4" id="upload_file" onchange="uploadFile(event)">
</body>

<script>
    async function uploadFile(e) {
        const video_file = e.target.files[0];
        const res = await extractVideoFrame(video_file)
        console.log('截取结果', res);
    }
    /**
     * 提取视频第一帧
     * @param {File}  video_file
     */
    function extractVideoFrame(video_file) {
        return new Promise((resolve) => {
            let canvasEl = document.createElement('canvas');
            let videoEl = document.createElement('video');

            videoEl.currentTime = 0.3; // 跳转到指定时间点
            videoEl.muted = true;
            videoEl.src = URL.createObjectURL(video_file);
            videoEl.onloadedmetadata = () => {
                videoEl.play()
            };
            videoEl.ontimeupdate = () => {
                if (videoEl.readyState !== 0 && videoEl.readyState !== 1) {
                    videoEl.pause()
                }
            };
            videoEl.onpause = () => {
                const _w = videoEl.videoWidth;//获取视频宽度
                const _h = videoEl.videoHeight;//获取视频高度
                canvasEl.width = _w;//设置画布宽高
                canvasEl.height = _h;//设置画布宽高
                const ctx = canvasEl.getContext('2d');
                ctx.drawImage(videoEl, 0, 0, _w, _h);// 绘制视频第一帧
                canvasEl.toBlob(// 将canvas转为blob
                    (blob) => {
                        const img_file = new File([blob], (video_file.name.split('.mp4')[0] ?? '未知') + '.jpeg', { type: blob.type })// 将blob转为file
                        const preview_url = URL.createObjectURL(img_file);// 将file转为url
                        document.body.appendChild(canvasEl)
                        resolve({ img_file, preview_url })
                        canvasEl = videoEl = null
                    },
                    'image/jpeg',
                    1
                );
            }
        })
    }
</script>

</html>