<template>
	<view class="container">
		<!-- 用于放置VAP播放器的容器 -->
		<view id="vapContainer"></view>
		<!-- 用户头像，通过定位等方式与VAP容器重叠 -->
		<!-- <image :src="avatarUrl" class="user-avatar" mode="aspectFill"></image> -->
	</view>
</template>

<script>
	// 引入 VAP 库
	import Vap from 'video-animation-player';
	import config from './demo.json';
	import testVideo from '@/static/che.mp4';
	export default {
		props: {
			avatarUrl: {
				type: String,
				default: () => "https://example.com/path/to/your/avatar.png",
			},
			videoUrl: {
				type: String,
				default: () => "",
			}
		},
		data() {
			return {
				vapInstance: null ,
				testUrl:testVideo
			};
		},
		mounted() {
			// 确保 DOM 已经渲染
			this.$nextTick(() => {
				this.initVap();
			});
		},
		beforeDestroy() {
			// 组件销毁时，务必销毁 VAP 实例以避免内存泄漏
			if (this.vapInstance) {
				this.vapInstance.destroy();
			}
		},
		methods: {
			initVap() {
				// VAP 配置参数
				const options = {
					container: document.getElementById('vapContainer'), // 容器 DOM 元素
					src: this.testUrl, // VAP 视频路径
					config: config,
					width: 200, // 宽度
					height: 100, // 高度
					loop: true, // 是否循环播放
					mute: true, // 是否静音（通常头像框不需要声音）
					accurate: false, // 是否启用精准模式

				};
				// 创建 VAP 实例并播放
				this.vapInstance = new Vap(options);
				this.vapInstance.play(); // 开始播放
			}
		}
	};
</script>

<style>
.container {
  position: relative;
  width: 300px;
  height: 300px;
  /* 其他样式 */
}

#vapContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* 确保 VAP 视频层在上方 */
}

.user-avatar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
  width: 150px; /* 根据你的 VAP 视频中预留的头像区域大小调整 */
  height: 150px;
  border-radius: 50%; /* 如果头像是圆形 */
  z-index: 2; /* 头像在视频层下方 */
  /* 其他样式 */
}
</style>