uniapp 中app通过视频链接获取封面

此方法使用了renderjs，可配合查看

首先添加:vsrc=“vsrc” :change:vsrc="renderScript.vimghuode"加在任意view标签上，意为当vsrc值发生改变时调用renderScript下的vimghuode方法，即获取封面方法

加个点击事件 @tap="renderScript.fasong_vimg"用于从renderjs返回封面图链接
如

使用步骤：1.复制下方所用方法与参数并观看上方标黑文字2.调用fengmian方法参数为视频链接3.通过点击事件获取返回的封面图链接。

renderjs部分

<script module="renderScript" lang="renderjs">
	export default {
		data() {
			return {
				test:""
			}
		},
		mounted() {
			
		},
		methods: {
			//通过视频获得缩略图
			vimghuode(newValue, oldValue, ownerVm, vm){
				if(newValue==null)
					return;
				let that=this;
				// 在缓存中创建video标签
				let video = document.createElement("VIDEO")
				// 添加一个静音的属性，否则自动播放会有声音
				// video.setAttribute('muted', true)
				video.muted=true
				// 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图
				video.autoplay=true;
				//允许跨域访问
				video.crossOrigin='anonymous';
				// 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源
				video.innerHTML = '<source src=' + newValue.src + ' type="audio/mp4">'
				// 再创建canvas画布标签
				let canvas = document.createElement('canvas');
				let ctx = canvas.getContext('2d');
				// video注册canplay自动播放事件
				video.addEventListener('canplay', function() {
					// 创建画布的宽高属性节点，就是图片的大小，单位PX
					let anw = document.createAttribute("width");
					anw.nodeValue = newValue.width;
					let anh = document.createAttribute("height");
					anh.nodeValue = newValue.height;
					canvas.setAttributeNode(anw);
					canvas.setAttributeNode(anh);
					// 画布渲染
					ctx.drawImage(video, 0, 0, newValue.width, newValue.height);
					// 生成图片
					that.test = canvas.toDataURL('image/png') // 这就是封面图片的base64编码
					// 视频结束播放的事件
					video.pause()
				}, false)
			},
			//此方法用户在template中手动操作触发
			fasong_vimg(event, ownerInstance){
				ownerInstance.callMethod('jiehsou_vimg', {
					test: this.test
				})
			}
		}
	}
</script>

普通vue部分
其中fengmian方法获取封面图传入参数视频链接即可

<script>
	export default {
		data() {
			return {
				vsrc:null//用于renderjs通信
			}
		},
		onLoad() {
		},
		methods: {
			jiehsou_vimg(data){
				//data.test为返回的封面图
			},
			//视频封面图
			fengmian(lianjie){
				uni.getVideoInfo({//视频详细信息
					src:lianjie,
					success(e) {
						let jihe={};
						jihe.src=lianjie;
						let h,w;
						if(e.orientation=="left"||e.orientation=="right"||e.orientation=="left-mirrored"||e.orientation=="right-mirrored"){
							h=e.width;
							w=e.height;
						}else{
							w=e.width;
							h=e.height;
						}
						
						jihe.width=w;
						jihe.height=h;						

						that.vsrc=jihe;//因change调用renderScript.vimghuode方法获取封面
					},
					fail(e) {
						console.log(e);
					}
				})
			}
			
		}
	}
</script>

其中画布高宽由getVideoInfo获得，有需求或视频旋转判断可自行修改
效果图