guzijian / wvp-GB28181-pro · Files

<template>
  <div class="player-wrapper" @click="onPlayerClick">
    <!-- 播放器容器 -->
    <div :id="uniqueId" ref="container" class="player-box"></div>

    <!-- 待机/无信号遮罩 -->
    <!-- 【修改】增加 showCustomMask 判断，为 false 时不显示 -->
    <div v-if="showCustomMask && !hasUrl && !isLoading && !isError" class="idle-mask"></div>

    <!-- 状态蒙层 (Loading / Error) -->
    <!-- 【修改】增加 showCustomMask 判断，为 false 时不显示 -->
    <div v-if="showCustomMask && (isLoading || isError)" class="status-mask">
      <div v-if="isLoading" class="loading-content">
        <div class="loading-spinner"></div>
        <div class="status-text">视频连接中...</div>
      </div>
      <div v-else-if="isError" class="error-content">
        <div class="status-text error-text">{{ errorMessage }}</div>
        <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click.stop="handleRetry">重试</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    initialPlayUrl: { type: [String, Object], default: '' },
    initialBufferTime: { type: Number, default: 0.1 },
    isResize: { type: Boolean, default: true },
    loadTimeout: { type: Number, default: 20000 },
    hasAudio: { type: Boolean, default: true },
    // 【新增】是否显示自定义遮罩层
    // true: 显示加载动画、错误提示、待机黑幕 (默认，适用于单路播放)
    // false: 隐藏所有遮罩，直接显示播放器底层 (适用于轮播，减少视觉干扰)
    showCustomMask: { type: Boolean, default: true }
  },
  data() {
    return {
      uniqueId: `player-box-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
      playerInstance: null,
      isPlaying: false,
      retryCount: 0,
      isLoading: false,
      isError: false,
      errorMessage: '',
      timeoutTimer: null,
      checkVideoTimer: null,
      statusPoller: null
    };
  },
  computed: {
    hasUrl() {
      const url = this.initialPlayUrl;
      if (!url) return false;
      if (typeof url === 'string') return url.length > 0;
      return !!url.videoUrl;
    }
  },
  watch: {
    initialPlayUrl(newUrl) {
      const url = typeof newUrl === 'string' ? newUrl : (newUrl && newUrl.videoUrl) || '';

      if (url) {
        if (this.playerInstance) {
          // 切换时清屏 (如果 showCustomMask=false，虽然不显示遮罩，但画面依然会变黑，体验更好)
          this.clearScreen(true);
          setTimeout(() => this.play(url), 10); // 从30ms减少到10ms，加快切换速度
        } else {
          this.create();
          this.$nextTick(() => this.play(url));
        }
      } else {
        this.pause();
        this.clearScreen(false);
      }
    },
    hasAudio() {
      const url = typeof this.initialPlayUrl === 'string' ? this.initialPlayUrl : (this.initialPlayUrl && this.initialPlayUrl.videoUrl) || '';
      if (url) {
        this.destroyAndReplay(url);
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.create();
        const url = typeof this.initialPlayUrl === 'string' ? this.initialPlayUrl : (this.initialPlayUrl && this.initialPlayUrl.videoUrl) || '';
        if (url) {
          this.play(url);
        }
      }, 50); // 从100ms减少到50ms，加快初始化
    });
  },
  beforeDestroy() {
    this.destroy();
  },
  methods: {
    create() {
      if (this.playerInstance) return;
      const container = this.$refs.container;
      if (!container) return;

      if ((container.clientWidth === 0 || container.clientHeight === 0) && this.retryCount < 10) {
        this.retryCount++;
        return;
      }

      if (!window.EasyPlayerPro) {
        this.triggerError('核心组件未加载');
        return;
      }

      try {
        container.innerHTML = '';
        this.playerInstance = new window.EasyPlayerPro(container, {
          bufferTime: 0.1, // 减小缓冲时间，加快启动
          stretch: !this.isResize,
          hasAudio: this.hasAudio,
          videoBuffer: 0.1, // 减小视频缓冲，加快显示
          isLive: true,
        });

        this.retryCount = 0;

        // 库自带事件
        this.playerInstance.on('playStart', () => {
          this.isPlaying = true;
          clearTimeout(this.timeoutTimer);
        });

        this.playerInstance.on('playError', (err) => {
          console.error('播放错误:', err);
          this.triggerError('播放发生错误');
        });

        this.playerInstance.on('timeupdate', () => this.onVideoContentReady());

        this.bindNativeEvents();

      } catch (e) {
        console.warn("播放器实例创建未成功:", e.message);
        this.playerInstance = null;
      }
    },

    bindNativeEvents() {
      const container = this.$refs.container;
      if (!container) return;
      if (this.checkVideoTimer) clearInterval(this.checkVideoTimer);

      this.checkVideoTimer = setInterval(() => {
        const videoEl = container.querySelector('video');
        if (videoEl) {
          clearInterval(this.checkVideoTimer);
          this.checkVideoTimer = null;

          videoEl.addEventListener('playing', () => this.onVideoContentReady());
          videoEl.addEventListener('loadeddata', () => this.onVideoContentReady());
          videoEl.addEventListener('timeupdate', () => {
            if (videoEl.currentTime > 0) this.onVideoContentReady();
          });
        }
      }, 100);
    },

    startVideoStatusPoller() {
      if (this.statusPoller) clearInterval(this.statusPoller);
      this.statusPoller = setInterval(() => {
        if (!this.isLoading) {
          clearInterval(this.statusPoller);
          this.statusPoller = null;
          return;
        }
        const container = this.$refs.container;
        if (container) {
          const videoEl = container.querySelector('video');
          if (videoEl && (videoEl.currentTime > 0.1 || videoEl.readyState > 2)) {
            this.onVideoContentReady();
          }
        }
      }, 200);
    },

    clearScreen(showLoading = true) {
      this.isLoading = showLoading;
      this.isError = false;
      this.errorMessage = '';

      if (this.statusPoller) {
        clearInterval(this.statusPoller);
        this.statusPoller = null;
      }

      const container = this.$refs.container;
      if (container) {
        const videoEl = container.querySelector('video');
        if (videoEl) {
          videoEl.pause();
          videoEl.src = "";
          videoEl.removeAttribute('src');
          videoEl.removeAttribute('poster');
          videoEl.load();
        }
      }
    },

    onVideoContentReady() {
      if (this.isLoading || this.isError) {
        this.isLoading = false;
        this.isError = false;
        this.isPlaying = true;
        this.errorMessage = '';
        if (this.timeoutTimer) clearTimeout(this.timeoutTimer);
        if (this.statusPoller) clearInterval(this.statusPoller);
      }
    },

    play(url) {
      const playUrl = url || this.initialPlayUrl;
      if (!playUrl) return;

      if (!this.playerInstance) {
        this.create();
        setTimeout(() => this.play(playUrl), 200);
        return;
      }

      this.resetStatus();
      this.isLoading = true;

      this.timeoutTimer = setTimeout(() => {
        if (!this.isPlaying) {
          this.triggerError('视频加载超时');
        }
      }, this.loadTimeout);

      this.playerInstance.play(playUrl)
        .then(() => {
          this.isPlaying = true;
          clearTimeout(this.timeoutTimer);
        })
        .catch(e => {
          console.error(`播放调用失败:`, e);
          this.triggerError('无法连接流媒体');
        });

      this.bindNativeEvents();
      this.startVideoStatusPoller();
    },

    triggerError(msg) {
      this.isLoading = false;
      this.isPlaying = false;
      this.isError = true;
      this.errorMessage = msg;
      if (this.timeoutTimer) clearTimeout(this.timeoutTimer);
      if (this.statusPoller) clearInterval(this.statusPoller);
    },

    resetStatus() {
      this.isLoading = false;
      this.isError = false;
      this.errorMessage = '';
      if (this.timeoutTimer) clearTimeout(this.timeoutTimer);
      if (this.statusPoller) clearInterval(this.statusPoller);
    },

    handleRetry() {
      this.destroyAndReplay(this.initialPlayUrl);
    },

    pause() {
      if (this.playerInstance && this.isPlaying) {
        this.playerInstance.pause();
        this.isPlaying = false;
      }
    },

    destroy() {
      this.resetStatus();
      if (this.checkVideoTimer) clearInterval(this.checkVideoTimer);
      
      if (this.playerInstance) {
        try {
          this.playerInstance.destroy();
        } catch (e) {
          console.warn('播放器销毁失败:', e);
        }
        this.playerInstance = null;
        this.isPlaying = false;
      }
      
      // 清除video元素,但保留容器以便下次播放
      const container = this.$refs.container;
      if (container) {
        const videoEl = container.querySelector('video');
        if (videoEl) {
          videoEl.pause();
          videoEl.src = '';
          videoEl.load();
          videoEl.remove();
        }
      }
    },

    destroyAndReplay(url) {
      this.destroy();
      this.clearScreen(true);
      setTimeout(() => {
        this.create();
        let playUrlString = url;
        if (typeof url === 'object' && url !== null) {
          playUrlString = url.videoUrl;
        }
        this.play(playUrlString);
      }, 200);
    },

    onPlayerClick() {
      this.$emit('click');
    },
  },
};
</script>

<style scoped>
/* 确保 video 标签本身也是黑色背景 */
::v-deep video {
  background: #000 !important;
  object-fit: contain;
}

.player-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.player-box {
  flex: 1;
  width: 100%;
  height: 100%;
  background: #000 !important;
  overflow: hidden;
  position: relative;
  transform: translate3d(0, 0, 0);
  contain: strict;
}

.status-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.idle-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 15;
  pointer-events: auto;
}

/* ... 保持原有样式 ... */
.loading-content, .error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 5px;
}

.loading-content {
  gap: 10px;
}

.error-content {
  gap: 5px;
}

.status-text {
  font-size: 12px;
  color: #fff;
  line-height: 1.5;
  word-break: break-all;
}

.error-text {
  color: #ff6d6d;
  margin-bottom: 2px;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>