js获取视频的第一帧图片并上传和视频时长

js获取视频的第一帧图片并上传和视频时长

项目中要求上传视频的时候要自动获取第一帧作为App端的视频播放封面。

1、获取视频的第一帧封面

captureImage() {let that = this;// 创建视频对象let video = new Video();video.width = 200;vieo.height = 500;video.setAttribute('crossOrigin'， 'Anonymous');video.setAttribute('controls', 'controls');video.setAttribute('autoplay', 'autoplay');video.volume = 0;video.setAttribute('src', url); // 视频的链接video.addEventListener('loadeddate', function() {// 创建canvas画布let canvas = ateElement('canvas');canvas.width = video.width;  // 设置画布的长宽也就是图片的长宽canvas.height = video.Context('2d').drawImage(video, 0, 0, canvas.width, canvas.height);let img = ateElement('img');img.setAttribute('crossOrigin', 'Anonymous');img.src = DataURL('image/png');let name = img.src.substring(img.src.lastIndexOf("/") + 1, img.src.length);that.dataURLtoFile(img.src, name);})
}

2、上传视频第一帧图片

dataURLtoFile(dataurl, filename) {let arr = data.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while (n--) {u8arr = bstr.charCodeAt(n);}let file = new File([u8arr], filename, {type: mime});// 后面就是你上传图片的接口
}