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

话不多说，直接上代码

<template>
	<view class="content">
		<image v-if="demo != ''" class="logo" :src="demo">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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

效果图