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>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    initialPlayUrl: { type: String, default: '' },
    isResize: { type: Boolean, default: true },
    videoTitle: { type: String, default: '' },
    hasAudio: { type: Boolean, default: false }
  },
  data() {
    return {
      uniqueId: `player-box-${Date.now()}-${Math.floor(Math.random() * 1000)}`,
      playerInstance: null,
      netSpeed: '0KB/s',
      hasStarted: false,
      showControls: false,
      controlTimer: null,

      // 【配置控制表】
      controlsConfig: {
        showBottomBar: true,   // 是否显示底栏
        showSpeed: false,      // 是否显示底部原生的网速 (建议 false，因为顶部已经有了)
        showCodeSelect: false, // 是否显示解码器/分辨率切换

        showPlay: true,        // 播放暂停
        showAudio: true,       // 音量
        showStretch: true,     // 拉伸
        showScreenshot: true,  // 截图
        showRecord: true,      // 录制
        showZoom: true,        // 电子放大
        showFullscreen: true,  // 全屏
      }
    };
  },
  computed: {
    // 根据配置生成 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(newUrl, oldUrl) {
      if (newUrl && newUrl !== oldUrl) {
        this.destroyAndReplay(newUrl);
      } else if (!newUrl) {
        this.destroy();
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        if (this.$refs.container) {
          this.create();
          if (this.initialPlayUrl) {
            this.play(this.initialPlayUrl);
          }
        }
      }, 500);
    });
  },
  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;
    },

    create() {
      if (this.playerInstance) return;
      const container = this.$refs.container;
      if (!container || !window.EasyPlayerPro) return;
      if (container.clientWidth === 0) return;

      try {
        // 保持原有的创建逻辑不变
        this.playerInstance = new window.EasyPlayerPro(container, {
          bufferTime: 0.2,
          stretch: !this.isResize,
          MSE: true,
          WCS: true,
          hasAudio: this.hasAudio,
          isLive: true,
          loading: true,
          isBand: true, // 必须为 true 才能获取网速回调
          // js配置全开，实际显隐由 CSS 控制
          btns: {
            fullscreen: true,
            screenshot: true,
            play: true,
            audio: true,
            record: true,
            stretch: true,
            zoom: true,
          }
        });

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

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

        this.playerInstance.on('error', (err) => {
          console.warn('Player Error:', err);
        });

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

    play(url) {
      const playUrl = url || this.initialPlayUrl;
      if (!playUrl) return;
      if (!this.playerInstance) {
        this.create();
        setTimeout(() => this.play(playUrl), 200);
        return;
      }
      this.playerInstance.play(playUrl).catch(e => {
        console.warn('Play Error:', e);
      });
    },

    destroy() {
      this.hasStarted = false;
      this.showControls = false;
      if (this.playerInstance) {
        this.playerInstance.destroy();
        this.playerInstance = null;
      }
    },

    destroyAndReplay(url) {
      this.destroy();
      this.$nextTick(() => {
        this.create();
        if (url) this.play(url);
      });
    },

    onPlayerClick() {
      this.$emit('click');
    },

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

<style scoped>
/* 组件自身的 Scoped 样式 */
.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%;
  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; }
</style>

<style>
/* =========================================
   1. 基础显隐控制 (映射 controlsConfig)
   ========================================= */

/* 网速显示 */
.player-wrapper.hide-speed .easyplayer-speed {
  display: none !important;
}

/* 解码器/清晰度选择面板 */
.player-wrapper.hide-code-select .easyplayer-controls-code-wrap {
  display: none !important;
}

/* 整个底部栏 */
.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.hide-btn-stretch .easyplayer-stretch {
  display: none !important;
}

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

/* =========================================
   2. 样式修正与美化
   ========================================= */

/* 强制隐藏整个控制栏 (当鼠标移出且 force-hide-controls 为 true 时) */
.player-wrapper.force-hide-controls .easyplayer-controls {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease;
}

/* --- 录制状态栏位置修正 --- */

/* 默认隐藏，防止初始闪烁 */
.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;
}

/* 当播放器将其设为 block 时，强制改为 flex 布局 */
.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;
  line-height: 1;
}

.player-wrapper .easyplayer-recording-stop {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer;
}

/* --- 拉伸按钮图标修正 (使用 SVG) --- */
.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 .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 .easyplayer-loading-img {
  background-color: #000 !important; /* 黑色背景 */
  background-image: none !important; /* 清除外部GIF */
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  animation: none !important; /* 取消原生动画 */
}

/* 外层圆环（带渐变光效）- 核心修改：柔和科技蓝 */
.player-wrapper .easyplayer-loading-img::before {
  content: "";
  width: 70px;
  height: 70px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 4px solid transparent;
  border-top-color: #1e90ff; /* 柔和科技蓝（不刺眼的天蓝色） */
  border-right-color: #1e90ff;
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
  z-index: 1;
  box-shadow: 0 0 15px rgba(30, 144, 255, 0.3); /* 匹配蓝色的柔和光晕 */
}

/* 内层圆环（白色半透明）- 保留不变，保证层次感 */
.player-wrapper .easyplayer-loading-img::after {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.3); /* 白色半透明 */
  border-bottom-color: rgba(255, 255, 255, 0.8); /* 底部高亮 */
  border-radius: 50%;
  animation: spin-reverse 0.8s linear infinite;
  z-index: 2;
}

/* 旋转动画（顺时针） */
@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 旋转动画（逆时针） */
@keyframes spin-reverse {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* 隐藏加载文字 */
.player-wrapper .easyplayer-loading-text {
  display: none !important;
}
</style>