1

huanghongfeng

11 小时以前 b1c2dd1869a51b8f0e4acb9ddeb148f796db147f

 ÏîÄ¿´úÂë/DP/src/views/indexs/center-map.vue

@@ -10,12 +10,12 @@
          autoplay 
          preload="auto"
          muted
          @click="unmuteVideo"
          @click="handleVideoClick"
        >
          æ‚¨çš„浏览器不支持视频播放。
        </video>
        <div v-if="isMuted" class="mute-hint" @click="unmuteVideo">
          <span>点击取消静音（5秒后自动播放声音）</span>
        <div v-if="showUnmuteButton" class="unmute-button" @click="unmuteVideo">
          <span>🔇 ç‚¹å‡»å–消静音</span>
        </div>
      </dv-border-box-13>
    </div>
@@ -26,45 +26,81 @@
export default {
  data() {
    return {
      isMuted: false,
      unmuteTimeout: null // å­˜å‚¨å®šæ—¶å™¨ä»¥ä¾¿æ¸…理
      showUnmuteButton: true, // æ˜¾ç¤ºå–消静音按钮
      hasUserInteracted: false, // è®°å½•ç”¨æˆ·æ˜¯å¦å·²äº¤äº’
      wasPlaying: false // è®°å½•è§£é™¤é™éŸ³å‰çš„播放状态
    };
  },
  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); // æ¸…除定时器避免内存泄漏
    const video = this.$refs.videoPlayer;
    if (video) {
      video.removeEventListener('error', this.handleVideoError);
    }
  },
  methods: {
    initVideo() {
    async initVideo() {
      const video = this.$refs.videoPlayer;
      if (video) {
        video.addEventListener('ended', () => {
          video.currentTime = 0;
          video.play();
        });
        // ç¡®ä¿è§†é¢‘以静音状态开始
        video.muted = true;
        
        // æ·»åŠ é”™è¯¯ç›‘听
        video.addEventListener('error', this.handleVideoError);
        
        // å°è¯•è‡ªåŠ¨æ’­æ”¾ï¼ˆé™éŸ³çŠ¶æ€ä¸‹é€šå¸¸å…è®¸ï¼‰
        try {
          await video.play();
          this.wasPlaying = true;
        } catch (error) {
          console.log('自动播放被阻止:', error);
        }
      }
      document.addEventListener('click', this.unmuteVideo, { once: true });
    },
    unmuteVideo() {
    
    handleVideoClick() {
      if (!this.hasUserInteracted) {
        this.hasUserInteracted = true;
        // ç”¨æˆ·ç¬¬ä¸€æ¬¡ç‚¹å‡»è§†é¢‘时尝试解除静音
        this.unmuteVideo();
      }
    },
    
    async unmuteVideo() {
      const video = this.$refs.videoPlayer;
      if (video) {
      if (!video) return;
      
      // è®°å½•å½“前播放状态
      this.wasPlaying = !video.paused;
      
      try {
        // å…ˆç¡®ä¿è§†é¢‘在播放
        if (this.wasPlaying) {
          await video.play();
        }
        
        // è§£é™¤é™éŸ³
        video.muted = false;
        video.volume = 1.0;
        this.isMuted = 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) {
@@ -78,7 +114,6 @@
</script>

<style scoped>
/* æ ·å¼ä¿æŒä¸å˜ */
.centermap {
  width: 100%;
  height: 100%;
@@ -106,18 +141,27 @@
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.mute-hint {
.unmute-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.7);
  bottom: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  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>