js 提取视频第xxx秒画面帧/canvas显示或img显示

最新推荐文章于 2024-06-24 09:45:08 发布

杨先森不是先生

最新推荐文章于 2024-06-24 09:45:08 发布

阅读量313

点赞数 1

文章标签： javascript 音视频前端

本文链接：https://blog.csdn.net/qq_46870369/article/details/132107600

版权

话不多说直接上代码（复制粘贴即可）

<!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>
        img,
        video,
        canvas {
            width: 100px;
            height: 100px;
            display: block;
            object-fit: cover;
        }
    </style>
</head>

<body>
    <input type="file">
    <script>
        const inp = document.querySelector("input");
        inp.onchange = async (e) => {
            // debugger
            const file = e.target.files[0];
            const frame = await captureFrame(file, 3.3)
            createPreview(frame)
        }
        function createPreview(frame) {
            const img = document.createElement("img");
            img.src = frame.url;
            document.body.appendChild(img);
        }
        function captureFrame(vdoFile, time = 0) {
            return new Promise((resolve, reject) => {
                //视频播放才能提取到画面不然是黑色的
                const vdo = document.createElement('video');
                vdo.currentTime = time
                vdo.muted = true
                vdo.autoplay = true
                vdo.oncanplay = async () => {
                    const frame = await drawVideo(vdo)
                    resolve(frame)
                }
                vdo.src = URL.createObjectURL(vdoFile)
            })
        }
        function drawVideo(vdo) {
            return new Promise(resolve => {
                const cvs = document.createElement('canvas');
                const ctx = cvs.getContext('2d');
                cvs.width = vdo.videoWidth;
                cvs.height = vdo.videoHeight;
                ctx.drawImage(vdo, 0, 0, cvs.width, cvs.height);
                //canvas画面转blob格式
                cvs.toBlob(blob => {
                    resolve({
                        blob,
                        url: URL.createObjectURL(blob)
                    })
                })
                //canvas画面展示
                // document.body.appendChild(cvs);
            })
        }
    </script>
</body>

</html>