uniapp h5 上传视频 获取视频的第一帧作为封面图

1:创建video获取视频(上传或者网络视频)

var video = document.createElement("VIDEO");

2:指定video截取当前帧数

video.currentTime = 5; //必须设置视频当前时长,要不然会黑屏

3:创建canvas画布

var canvas = document.createElement('canvas');

4:视频加载完毕,截取视频帧数,绘画视频封面

// 图片绘制
video.onloadeddata = (() => {
    // 设置画布的宽高
    canvas.width = video.clientWidth;
    canvas.height = video.clientHeight;      
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width,canvas.height);
    var dataURL = canvas.toDataURL('image/jpeg'); //base64 格式
    // console.log(dataURL,"-----")
})

完整的uniapp h5选择视频

//选择视频
chooseVideo: function() {
	let that = this;
	uni.chooseVideo({
		count: 1,
		sourceType: ['album'],
		success: function(res) {
			let videoss = document.createElement('video');
			var canvas = document.createElement('canvas');
			videoss.currentTime = 5;

			videoss.onloadeddata = function(v) {
				var ctx = canvas.getContext('2d');
				ctx.drawImage(videoss, 0, 0, res.width, res.height, 0, 0, 290, 150);
				var dataURL = canvas.toDataURL('image/jpeg'); //base64 格式
				console.log(dataURL,"-----")
			}
		}
	})
},

你可能感兴趣的:(jquery)