yjhtgl-web/src/components/HKVideo/index.vue

<template>
  <div class="dot-box" :style="{ width: width ? width + 'px' : '100%', height: height ? height + 'px' : '100%' }">
    <div class="video-box" @click="play_now">
      <HikvisionPlayer
        v-if="!reload && (isPlaying || autoplay) && !isNoLive"
        ref="videoPlayer"
        style="width: 100%; height: 100%; object-fit: fill"
        @on-playing="onHkPlaying"
        @on-play-error="onHKPlayError"
      />
      <FlvVideo v-if="isPlaying && isNoLive" ref="FlvVideoRef" :videoUrl="dot_data.video_code"style="width: 100%; height: 100%; object-fit: fill" />
      <img v-if="posterVisible" class="video-play" src="@/assets/images/video/play.png" alt="" />
      <img v-if="posterVisible && dot_data.poster" class="video-poster" :src="dot_data.poster" />
      <div v-if="errBKVisible" class="err_bk">
        <div class="err_box">
          <div class="err_inner_box">
            <div class="err_icon"></div>
            <div class="err_text">视频解析错误</div>
            <div class="refresh_btn" @click="play">刷新</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="HKVideo">
import HikvisionPlayer from './hikvision-h5player.vue';
import { getVideoUrlById } from '@/api/videoMonitor';

const props = defineProps({
  dot_data: Object,
  width: Number,
  height: Number,
  autoplay: Boolean,
  isNoLive: Boolean
});
const play = () => {
  play_now();
};

const refresh_data = () => {
  reload.value = true;
  nextTick(() => {
    reload.value = false;
    play_now();
  });
};

const emits = defineEmits(['propClick', 'videoPreviewClick', 'favorClick']);

// https://blog.csdn.net/weixin_49826079/article/details/135147184
const isShowTip = ref(true);
const contentRef = ref(false);

const wsUrl = ref('');
const isPlaying = ref(false);
const errBKVisible = ref(false);
const posterVisible = ref(true);

const isShowTooltip = async () => {
  if (contentRef.value.parentNode.offsetWidth > contentRef.value.offsetWidth) {
    isShowTip.value = true;
  } else {
    isShowTip.value = false;
  }
};
const onHkPlaying = async () => {
  console.log('onHkPlaying');
  errBKVisible.value = false;
};

const onHKPlayError = async () => {
  console.log('onHKPlayError');
  errBKVisible.value = true;
  isPlaying.value = false;
};

let videoPlayer = ref(null);
let reload = ref(false);
watch(
  () => props.dot_data,
  () => {
    if (!!videoPlayer.value) {
      videoPlayer.value.stop();
    }
    posterVisible.value = true;
    errBKVisible.value = false;
    isPlaying.value = false;
    if (props.autoplay) {
      reload.value = true;
    }
    nextTick(() => {
      if (props.autoplay) {
        reload.value = false;
        play_now(true);
      }
    });
  },
  {
    deep: true
  }
);
const play_now = async (check?: boolean) => {
  posterVisible.value = false;
  errBKVisible.value = false;
  isPlaying.value = true;
  // 视频监控数据
  getVideoUrlById(props.dot_data.video_code).then((res) => {
    wsUrl.value = res.data;
    videoPlayer.value.play(wsUrl.value);
  });
  console.log('play_now');
};

const stop_now = async () => {
  if (isPlaying.value) {
    errBKVisible.value = false;
    videoPlayer.value.stop();
    isPlaying.value = false;
  }
  posterVisible.value = true;
};
const handleFullScreen = (name) => {
  videoPlayer.value.fullScreen(name);
};
const handleScreenshot = (name) => {
  videoPlayer.value.handleScreenshot(name);
};
const getPlayer = (name) => {
  return videoPlayer.value.getPlayer(name);
};
defineExpose({
  play,
  refresh_data,
  handleScreenshot,
  handleFullScreen,
  getPlayer
});
onMounted(() => {
  if (!!props.autoplay) {
    play_now(true);
  }
});
</script>

<style lang="scss" scoped>
.dot-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #000;
}

.video-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border-radius: 2px;
  //border: 1px solid #0056cf;

  .video-poster {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .video-play {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .err_bk {
    z-index: 900;
    left: 0;
    top: 0;
    background: #000;
    position: absolute;
    width: 100%;
    height: 100%;

    .err_box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;

      .err_inner_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        display: inline-flex;
        justify-content: center;
        align-items: center;

        .err_icon {
          width: 18px;
          height: 20px;
          background: url('@/assets/images/video/err_video.png') no-repeat;
          background-size: 100% 100%;
        }

        .err_text {
          font-size: 14px;
          color: #ffffffb3;
          margin-bottom: 4px;
        }

        .refresh_btn {
          width: 70px;
          height: 25px;
          border: 1px solid #001b41;
          background: #006affcc;
          cursor: pointer;

          color: #ffffff;
          text-align: center;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 25px;
        }
      }
    }
  }
}

.img {
  width: 100%;
  height: 170px;
}
</style>