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> |