更新羽声语音h5

component/avatar.vue

@@ -0,0 +1,94 @@
+<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>