94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
|
<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>
|