uni-app 获取视频第一帧转换为图片 并展示

话不多说，直接上代码

<template>
	<view class="content">
		<image v-if="demo != ''" class="logo" :src="demo"></image>
		<!-- <image class="logo" :src="url+videoImg"></image> -->
		<video :src="url"></video>
	</view>
</template>

<script>
	export default {
      
      
		data() {
      
      
			return {
      
      
				url: 'https://a1.easemob.com/1175220727113829/tikangbao2022/chatfiles/f2274ac0-3958-11ed-8939-9d38195bdc46',
				videoImg:"?vframe/jpg/offset/0",
				// url:'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',
				// videoImg:"?x-oss-process=video/snapshot,t_1,m_fast",
				demo:'',
			}
		},
		onLoad() {
      
      
			this.getVideoPoster(this.url)
		},
		methods: {
      
      
			
			  getVideoPoster(url) {
      
      
				  const that = this;
			      let video = document.createElement('video')
			      video.setAttribute('crossOrigin', 'anonymous') // 处理跨域，H5需后台支持，请求的视频资源响应投标需有Access-Control-Allow-Origin
			      video.setAttribute('src', url)
			      video.setAttribute('width', 400)
			      video.setAttribute('height', 400)
			      video.setAttribute('preload', 'auto')
			      // uni.chooseVideo选择视频，当选用手机拍摄的视频时，地址是相对地址，如 _doc/uniapp_temp_1650594368317/camera/1650594390147.mp4
			      // 可播放，但是loadeddata一直不执行，会触发error事件，视频加载失败
			      // 应先转换成本地地址
			      video.addEventListener('loadeddata', function () {
      
      
			        console.log('视频第一帧加载完')
			        let canvas = document.createElement('canvas')
			        let width = video.width // canvas的尺寸和图片一样
			        let height = video.height
			        canvas.width = width
			        canvas.height = height
			        canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
			        const dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
					that.demo = dataURL;
			        console.log('getVideoPoster-dataURL', dataURL.slice(0, 16)) 
			      })
			      
			      video.addEventListener('error', err => {
      
      
			        console.log('视频加载失败', err)         
			      })
			  },
		}
	}
</script>

<style>
	.content {
      
      
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
	}

	.logo {
      
      
		height: 500rpx;
		width: 500rpx;
		border: 3px solid red;
	}


</style>

效果图