uniapp自动获取视频第一帧作为视频封面

很多时候我们都需要使用视频的第一帧当作视频的封面，今天我们从uni-app的安卓app这个环境来实现下这个需求。文中需要你对uniapp的renderjs有一定了解，可以先看我的这篇文章初识renderjs

uniapp 安卓APP端（ios未测试）

方法：使用renderjs实现对DOM元素的操作，创建video元素获取视频转第一帧，使用canvas转为base64格式进行展示

<template> 	<video :src="src" :poster="poster" :change:src="video.setPoster"></video> </template>  <script> 	export default { 		data() { 			return { 				poster: '', 				src: 'https://oss-p56.xpccdn.com/prod/footage/preview/xpc/HHMFcJlnHMS3TBj.mp4' 			} 		}, 		methods: { 			getPoster(poster) { 				this.poster = poster 			} 		} 	} </script> <script lang="renderjs" module="video"> 	export default { 		methods: { 			setPoster(newV, oldV, ownerInstance) { 				let video = document.createElement("video"); 				video.setAttribute('crossOrigin', 'anonymous'); //处理跨域 				video.setAttribute('src', newV); 				可以手动设置视频大小，图片页默认同视频一样大 				//video.setAttribute('width', 1000); 				//video.setAttribute('height', 500); 				// 表示可以下载整个视频文件，即使用户不希望使用它。这样才能获取到视频文件 				video.setAttribute('preload', 'auto'); 				video.setAttribute('autoplay', true); 				// loadeddata 事件在媒体当前播放位置的视频帧（通常是第一帧）加载完成后触发。 				video.addEventListener('loadeddata', function() { 					let canvas = document.createElement("canvas"), 					width = video.videoWidth, //canvas的尺寸和图片一样 					height = video.videoHeight; 					canvas.width = width; 					canvas.height = height; 					canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas 					let poster = canvas.toDataURL('image/jpeg'); //转换为base64 					ownerInstance.callMethod('getPoster', poster) 					const bitmap = new plus.nativeObj.Bitmap('test');  					//下面代码可以用来将b64转图片存本地用于文件上传 					//bitmap.loadBase64Data(poster, () => { 					//	const url = '_doc/poster.png' 					//	bitmap.save(url, { 					//		overwrite: true 					//	}, e => { 					//		const { 					//			target 					//		} = e 					//		console.log(target, 'target'); 					//		ownerInstance.callMethod('selectedImage', target) 					//	}) 					//}) 				}); 			} 		} 	} </script>  

展示

注意发现传参如果是非基本类型会失效，如:poster=“obj.poster”