guzijian / wvp-GB28181-pro · Files

<template>
  <div
    class="player-wrapper"
    :class="[playerClassOptions, { 'force-hide-controls': !showControls }]"
    @click="onPlayerClick"
    @mousemove="onMouseMove"
    @mouseleave="onMouseLeave"
  >
    <div class="custom-top-bar" :class="{ 'hide-bar': !showControls }">
      <div class="top-bar-left">
        <span class="video-title">{{ videoTitle || '实时监控' }}</span>
      </div>
      <div class="top-bar-right">
        <span class="net-speed">
           <i class="el-icon-odometer"></i> {{ netSpeed }}
        </span>
      </div>
    </div>

    <div :id="uniqueId" ref="container" class="player-box"></div>

    <div v-if="!hasUrl" class="idle-mask">
      <div class="idle-text">无信号</div>
    </div>

    <div v-show="hasUrl && isLoading && !isError" class="status-mask loading-mask">
      <div class="spinner-box">
        <div class="simple-spinner"></div>
      </div>
      <div class="status-text">视频连接中...</div>
    </div>

    <div v-if="hasUrl && isError" class="status-mask error-mask">
      <div class="error-content">
        <i class="el-icon-warning-outline" style="font-size: 30px; color: #ff6d6d; margin-bottom: 10px;"></i>
        <div class="status-text error-text">{{ errorMessage }}</div>
        <el-button type="primary" size="mini" icon="el-icon-refresh-right" @click.stop="handleRetry" style="margin-top: 10px;">重试</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    initialPlayUrl: { type: [String, Object], default: '' },
    videoTitle: { type: String, default: '' },
    isResize: { type: Boolean, default: true },
    hasAudio: { type: Boolean, default: true },
    loadTimeout: { type: Number, default: 20000 },
    showCustomMask: { type: Boolean, default: true }
  },
  data() {
    return {
      uniqueId: `player-box-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
      playerInstance: null,

      // 状态
      isLoading: false,
      isError: false,
      errorMessage: '',
      hasStarted: false,

      // 交互
      netSpeed: '0KB/s',
      showControls: false,
      controlTimer: null,
      retryCount: 0,

      // 【配置区域】在这里修改 true/false 即可生效
      controlsConfig: {
        showBottomBar: true,    // 是否显示底栏
        showSpeed: false,       // 【关键】设为 false 隐藏底部网速
        showCodeSelect: false,  // 【关键】设为 false 隐藏解码选择

        showPlay: true,         // 播放暂停按钮
        showAudio: true,        // 音量按钮
        showStretch: true,      // 拉伸按钮
        showScreenshot: true,   // 截图按钮
        showRecord: true,       // 录制按钮
        showZoom: true,         // 电子放大
        showFullscreen: true,   // 全屏按钮
      }
    };
  },
  computed: {
    hasUrl() {
      const url = this.initialPlayUrl;
      if (!url) return false;
      if (typeof url === 'string') return url.length > 0;
      return !!url.videoUrl;
    },
    // 生成控制 CSS 类名
    playerClassOptions() {
      const c = this.controlsConfig;
      return {
        'hide-bottom-bar': !c.showBottomBar,
        'hide-speed': !c.showSpeed,            // 对应下方 CSS
        'hide-code-select': !c.showCodeSelect, // 对应下方 CSS

        'hide-btn-play': !c.showPlay,
        'hide-btn-audio': !c.showAudio,
        'hide-btn-stretch': !c.showStretch,
        'hide-btn-screenshot': !c.showScreenshot,
        'hide-btn-record': !c.showRecord,
        'hide-btn-zoom': !c.showZoom,
        'hide-btn-fullscreen': !c.showFullscreen,
      };
    }
  },
  watch: {
    initialPlayUrl: {
      handler(newUrl) {
        const url = typeof newUrl === 'string' ? newUrl : (newUrl && newUrl.videoUrl) || '';
        if (url) {
          this.isLoading = true;
          this.isError = false;
          this.$nextTick(() => {
            if (this.playerInstance) this.destroy();
            setTimeout(() => {
              this.create();
              this.play(url);
            }, 50);
          });
        } else {
          this.destroy();
          this.isLoading = false;
        }
      },
      immediate: true
    },
    hasAudio() {
      if (this.hasUrl) this.destroyAndReplay(this.initialPlayUrl);
    }
  },
  beforeDestroy() {
    this.destroy();
    if (this.controlTimer) clearTimeout(this.controlTimer);
  },
  methods: {
    onMouseMove() {
      if (!this.hasStarted) return;
      this.showControls = true;
      if (this.controlTimer) clearTimeout(this.controlTimer);
      this.controlTimer = setTimeout(() => {
        this.showControls = false;
      }, 3000);
    },
    onMouseLeave() {
      this.showControls = false;
    },
    onPlayerClick() {
      this.$emit('click');
    },

    create() {
      if (this.playerInstance) return;
      const container = this.$refs.container;
      if (!container) return;
      container.innerHTML = '';

      if (container.clientWidth === 0 && this.retryCount < 5) {
        this.retryCount++;
        setTimeout(() => this.create(), 200);
        return;
      }

      if (!window.EasyPlayerPro) return;

      try {
        const c = this.controlsConfig;

        this.playerInstance = new window.EasyPlayerPro(container, {
          bufferTime: 0.2,
          stretch: !this.isResize,
          MSE: true,
          WCS: true,
          hasAudio: this.hasAudio,
          isLive: true,
          loading: false,
          isBand: true, // 保持开启以获取数据

          // btns 配置只能控制原生有开关的按钮
          btns: {
            play: c.showPlay,
            audio: c.showAudio,
            fullscreen: c.showFullscreen,
            screenshot: c.showScreenshot,
            record: c.showRecord,
            stretch: c.showStretch,
            zoom: c.showZoom,
          }
        });

        this.retryCount = 0;

        this.playerInstance.on('kBps', (speed) => {
          this.netSpeed = speed + '/S';
        });

        this.playerInstance.on('play', () => {
          this.hasStarted = true;
          this.isLoading = false;
          this.isError = false;
          this.showControls = true;
          if (this.controlTimer) clearTimeout(this.controlTimer);
          this.controlTimer = setTimeout(() => {
            this.showControls = false;
          }, 3000);
        });

        this.playerInstance.on('error', (err) => {
          console.error('Player Error:', err);
          this.triggerError('流媒体连接失败');
        });

      } catch (e) {
        console.error("Create Error:", e);
      }
    },

    play(url) {
      if (!url) return;
      if (!this.playerInstance) {
        this.create();
        setTimeout(() => this.play(url), 200);
        return;
      }
      this.isLoading = true;
      this.isError = false;
      this.errorMessage = '';

      setTimeout(() => {
        if (this.isLoading) this.triggerError('连接超时，请重试');
      }, this.loadTimeout);

      this.playerInstance.play(url).catch(e => {
        this.triggerError('请求播放失败');
      });
    },

    destroy() {
      this.hasStarted = false;
      this.showControls = false;
      this.netSpeed = '0KB/s';
      const container = this.$refs.container;
      if (container) {
        const video = container.querySelector('video');
        if (video) {
          video.pause();
          video.src = "";
          video.load();
          video.remove();
        }
        container.innerHTML = '';
      }
      if (this.playerInstance) {
        try {
          this.playerInstance.destroy();
        } catch (e) {
        }
        this.playerInstance = null;
      }
    },

    destroyAndReplay(url) {
      this.isLoading = true;
      this.destroy();
      this.$nextTick(() => {
        this.create();
        if (url) {
          const u = typeof url === 'string' ? url : url.videoUrl;
          this.play(u);
        }
      });
    },

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

    triggerError(msg) {
      if (this.hasUrl) {
        this.isLoading = false;
        this.isError = true;
        this.errorMessage = msg;
      }
    },

    setControls(config) {
      this.controlsConfig = {...this.controlsConfig, ...config};
    }
  }
};
</script>

<style scoped>
/* --------------------------------------------------
  这里是组件内部样式，仅处理非 EasyPlayer 插件的部分
  --------------------------------------------------
*/
.player-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #000;
  overflow: hidden;
}

.player-box {
  flex: 1;
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  z-index: 1;
}

/* 顶部栏 */
.custom-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  z-index: 200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.custom-top-bar.hide-bar {
  opacity: 0;
}

.top-bar-left .video-title {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.top-bar-right .net-speed {
  color: #00ff00;
  font-size: 12px;
  font-family: monospace;
}

/* 蒙层 */
.status-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.idle-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
}

.idle-text {
  color: #555;
  font-size: 14px;
}

.status-text {
  color: #fff;
  margin-top: 15px;
  font-size: 14px;
  letter-spacing: 1px;
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.error-text {
  color: #ff6d6d;
}

/* Loading 动画 */
.spinner-box {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.simple-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-top-color: #409EFF;
  animation: spin 0.8s linear infinite;
}

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

<style>
/* 1. 控制网速显示显隐 */
.player-wrapper.hide-speed .easyplayer-speed {
  display: none !important;
}

/* 2. 控制解码面板显隐 */
.player-wrapper.hide-code-select .easyplayer-controls-code-wrap {
  display: none !important;
}

/* 3. 控制其他按钮显隐 (基于您提供的 controlsConfig) */
.player-wrapper.hide-bottom-bar .easyplayer-controls {
  display: none !important;
}

/* 播放按钮 */
.player-wrapper.hide-btn-play .easyplayer-play,
.player-wrapper.hide-btn-play .easyplayer-pause {
  display: none !important;
}

/* 音量按钮 */
.player-wrapper.hide-btn-audio .easyplayer-audio-box {
  display: none !important;
}

/* 截图按钮 */
.player-wrapper.hide-btn-screenshot .easyplayer-screenshot {
  display: none !important;
}

/* 全屏按钮 */
.player-wrapper.hide-btn-fullscreen .easyplayer-fullscreen,
.player-wrapper.hide-btn-fullscreen .easyplayer-fullscreen-exit {
  display: none !important;
}


/* --- 修正录制按钮样式 (强制应用) --- */
.player-wrapper.hide-btn-record .easyplayer-record,
.player-wrapper.hide-btn-record .easyplayer-record-stop {
  display: none !important;
}

/* 强制覆盖录制按钮位置 */
.player-wrapper .easyplayer-recording {
  display: none;
  position: absolute !important;
  top: 50px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 200 !important;
  background: rgba(255, 0, 0, 0.6);
  border-radius: 4px;
  padding: 4px 12px;
}

.player-wrapper .easyplayer-recording[style*="block"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.player-wrapper .easyplayer-recording-time {
  margin: 0 8px;
  font-size: 14px;
  color: #fff;
}

.player-wrapper .easyplayer-recording-stop {
  height: auto !important;
  cursor: pointer;
}


/* --- 修正拉伸按钮样式 (SVG图标) --- */
.player-wrapper.hide-btn-stretch .easyplayer-stretch {
  display: none !important;
}

.player-wrapper .easyplayer-stretch {
  font-size: 0 !important;
  width: 34px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.player-wrapper .easyplayer-stretch::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M128 128h298.667v85.333H195.2l201.6 201.6-60.373 60.374-201.6-201.6v231.466H49.067V49.067h78.933V128zM896 896H597.333v-85.333H828.8l-201.6-201.6 60.373-60.374 201.6 201.6V518.933h85.334v377.067h-78.934V896z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.8;
}

.player-wrapper .easyplayer-stretch:hover::after {
  opacity: 1;
}


/* --- 修正电子放大样式 --- */
.player-wrapper.hide-btn-zoom .easyplayer-zoom,
.player-wrapper.hide-btn-zoom .easyplayer-zoom-stop {
  display: none !important;
}

.player-wrapper .easyplayer-zoom-controls {
  position: absolute !important;
  top: 50px !important;
  left: 50% !important;
  transform: translateX(-50%);
  z-index: 199 !important;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20px;
  padding: 0 10px;
}


/* --- 整体显隐控制 --- */
.player-wrapper.force-hide-controls .easyplayer-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease;
}
</style>