如何截取视频第一帧（含跨域问题）

某某l

于 2020-04-13 10:11:27 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 其他文章标签： javascript jquery html

本文链接：https://blog.youkuaiyun.com/SunshineBlog/article/details/105482257

本文介绍了如何使用HTML的video标签结合JavaScript截取视频第一帧，并详细讨论了遇到的跨域问题及其解决策略，包括针对视频源的CORS设置和处理白图问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首选创建一个视频标签

<video src="" name='VideoWay' id="video" controls="controls" ></video>

创建一个截取视频图片的方法


    function initialize() {
        var scale = 0.8;
        var video = document.getElementById("video");;
        video.addEventListener('loadeddata', function () {
            var canvas = document.createElement("canvas"); // 创建一个画布
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); // getContext:设置画布环境；drawImage:画画
            var url = canvas.toDataURL("image/png", 1.0);//图片base64格式
            $("#picimg").attr("src", url)
        });

最低0.47元/天解锁文章