<template>
|
<div class="centermap">
|
<div class="mapwrap">
|
<dv-border-box-13>
|
<video
|
ref="videoPlayer"
|
class="screen-video"
|
src="../../assets/img/2.mp4"
|
loop
|
autoplay
|
preload="auto"
|
muted
|
@click="unmuteVideo"
|
>
|
您的浏览器不支持视频播放。
|
</video>
|
<div v-if="isMuted" class="mute-hint" @click="unmuteVideo">
|
<span>点击取消静音（5秒后自动播放声音）</span>
|
</div>
|
</dv-border-box-13>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
isMuted: false,
|
unmuteTimeout: null // 存储定时器以便清理
|
};
|
},
|
mounted() {
|
this.initVideo();
|
this.adjustVideoSize();
|
window.addEventListener('resize', this.adjustVideoSize);
|
|
// 5秒后自动取消静音
|
this.unmuteTimeout = setTimeout(() => {
|
this.unmuteVideo();
|
}, 5000);
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.adjustVideoSize);
|
if (this.unmuteTimeout) {
|
clearTimeout(this.unmuteTimeout); // 清除定时器避免内存泄漏
|
}
|
},
|
methods: {
|
initVideo() {
|
const video = this.$refs.videoPlayer;
|
if (video) {
|
video.addEventListener('ended', () => {
|
video.currentTime = 0;
|
video.play();
|
});
|
}
|
document.addEventListener('click', this.unmuteVideo, { once: true });
|
},
|
unmuteVideo() {
|
const video = this.$refs.videoPlayer;
|
if (video) {
|
video.muted = false;
|
video.volume = 1.0;
|
this.isMuted = false;
|
}
|
},
|
adjustVideoSize() {
|
const video = this.$refs.videoPlayer;
|
if (video) {
|
video.style.width = '100%';
|
video.style.height = '100%';
|
video.style.objectFit = 'cover';
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
/* 样式保持不变 */
|
.centermap {
|
width: 100%;
|
height: 100%;
|
|
.mapwrap {
|
height: 960px;
|
width: 100%;
|
box-sizing: border-box;
|
position: relative;
|
margin-top: 10px;
|
|
& > dv-border-box-13 {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
overflow: hidden;
|
}
|
}
|
}
|
|
.screen-video {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
}
|
|
.mute-hint {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background: rgba(0,0,0,0.7);
|
color: white;
|
padding: 10px 20px;
|
border-radius: 5px;
|
cursor: pointer;
|
z-index: 10;
|
}
|
</style>
|
