前端获取视频第一帧作为封面

一、方法一

通过创建canvas标签,利用其drawImage() 方法在画布上绘制该视频,然后运用toDataURL方法转换canvas上的图片为base64格式,并将base64格式的图片作为video标签的poster属性。toDataURL具有跨域问题。

注意:canvas无法对跨域的图片进行操作,需要提前处理好跨域问题

    getVideoBase64(url) {
        return new Promise(function (resolve, reject) {
            let dataURL = '';
            let video = document.createElement("video");
            video.setAttribute('crossOrigin', 'anonymous');//处理跨域
            video.setAttribute('src', url);
            video.setAttribute('width', 400);
            video.setAttribute('height', 240);
            video.addEventListener('loadeddata', function () {
                let canvas = document.createElement("canvas"),
                    width = video.width, //canvas的尺寸和图片一样
                    height = video.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
                resolve(dataURL);
            });
        })
    }

二、方法二

可以选择使用第三方平台实现。七牛云、阿里云等云端存储平台功能强大,不仅具有海量的存储功能,平台封装的还有很多功能丰富的API。若使用七牛云,以七牛云平台为例,说明一下视频截取方法

http://xxx.clouddn.com/test.mp4

如果想要实现截取视频的某一帧其实很方便,只需在视频的url后面这样拼接即可

http://xxx.clouddn.com/test.mp4?vframe/jpg/offset/8/w/300/h/200

其中“jpg”为生成图片的格式,‘8’为截取视频第8秒的截图,“w”为宽度300px,“h”为高度200px 。

发布了90 篇原创文章 · 获赞 18 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览