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

一、方法一

通过创建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 。