<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="handleVideoClick"
|
>
|
您的浏览器不支持视频播放。
|
</video>
|
<div v-if="showUnmuteButton" class="unmute-button" @click="unmuteVideo">
|
<span>🔇 点击取消静音</span>
|
</div>
|
</dv-border-box-13>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
showUnmuteButton: true, // 显示取消静音按钮
|
hasUserInteracted: false, // 记录用户是否已交互
|
wasPlaying: false // 记录解除静音前的播放状态
|
};
|
},
|
mounted() {
|
this.initVideo();
|
this.adjustVideoSize();
|
window.addEventListener('resize', this.adjustVideoSize);
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.adjustVideoSize);
|
const video = this.$refs.videoPlayer;
|
if (video) {
|
video.removeEventListener('error', this.handleVideoError);
|
}
|
},
|
methods: {
|
async initVideo() {
|
const video = this.$refs.videoPlayer;
|
if (video) {
|
// 确保视频以静音状态开始
|
video.muted = true;
|
|
// 添加错误监听
|
video.addEventListener('error', this.handleVideoError);
|
|
// 尝试自动播放（静音状态下通常允许）
|
try {
|
await video.play();
|
this.wasPlaying = true;
|
} catch (error) {
|
console.log('自动播放被阻止:', error);
|
}
|
}
|
},
|
|
handleVideoClick() {
|
if (!this.hasUserInteracted) {
|
this.hasUserInteracted = true;
|
// 用户第一次点击视频时尝试解除静音
|
this.unmuteVideo();
|
}
|
},
|
|
async unmuteVideo() {
|
const video = this.$refs.videoPlayer;
|
if (!video) return;
|
|
// 记录当前播放状态
|
this.wasPlaying = !video.paused;
|
|
try {
|
// 先确保视频在播放
|
if (this.wasPlaying) {
|
await video.play();
|
}
|
|
// 解除静音
|
video.muted = false;
|
|
// 隐藏取消静音按钮
|
this.showUnmuteButton = false;
|
} catch (error) {
|
console.error('解除静音失败:', error);
|
// 显示提示，告知用户需要交互才能播放声音
|
this.showUnmuteButton = true;
|
}
|
},
|
|
handleVideoError(e) {
|
const video = e.target;
|
console.error('视频错误:', video.error);
|
},
|
|
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;
|
cursor: pointer;
|
}
|
|
.unmute-button {
|
position: absolute;
|
bottom: 20px;
|
right: 20px;
|
background: rgba(0, 0, 0, 0.7);
|
color: white;
|
padding: 8px 16px;
|
border-radius: 20px;
|
cursor: pointer;
|
z-index: 10;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
transition: all 0.3s ease;
|
|
&:hover {
|
background: rgba(0, 0, 0, 0.9);
|
}
|
}
|
</style>
|
