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,"-----")
			}
		}
	})
},
  • 0
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值