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,"-----")
			}
		}
	})
},
Uniapp是一个跨平台的应用开发框架,可以同时开发出安卓、iOS和H5等多个平台的应用。在Uniapp中,我们可以使用一些插件来实现H5手机上传片和视频的功能。 对于上传,可以使用uni.uploadFile方法,通过选择片后,将其以formData的形式上传到后端服务器。代码示例如下: ``` uni.chooseImage({ success: function (res) { uni.uploadFile({ url: 'http://example.com/upload', filePath: res.tempFilePaths[0], name: 'file', success: function (res) { console.log('上传成功'); }, fail: function (err) { console.error('上传失败', err); } }); } }); ``` 而对于视频上传,可以使用uni.chooseVideo方法选择要上传视频文件,然后使用uni.uploadFile方法将其上传到后端服务器。代码示例如下: ``` uni.chooseVideo({ success: function (res) { uni.uploadFile({ url: 'http://example.com/upload', filePath: res.tempFilePath, name: 'file', success: function (res) { console.log('视频上传成功'); }, fail: function (err) { console.error('视频上传失败', err); } }); } }); ``` 需要注意的是,上传文件需要后端服务器的支持,我们需要提前配置好后端接口来处理文件上传的请求。另外,在使用上传功能之前,需要先在uni-app的manifest.json配置文件中,将H5平台的origin字段配置为后端服务器的域名,以防止跨域问题的出现。 总结起来,Uniapp可以通过选择片和视频文件,再通过uni.uploadFile方法将文件上传到后端服务器,实现H5手机上传片和视频的功能。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值