yjdp-web/src/components/HKVideo/index2.vue

<template>
  <div class="dot-box" :style="{ width: width ? width + 'px' : '100%', height: height ? height + 'px' : '100%' }">
    <div class="video-box" @click="play_now">
      <template v-if="isPlaying">
        <HikvisionPlayer
          v-if="!isNoLive"
          ref="videoPlayer"
          hide-enlarge
          style="width: 100%; height: 100%; object-fit: fill"
          @on-playing="onHkPlaying"
          @on-play-error="onHKPlayError"
        />
        <FlvVideo
          v-else
          ref="flvVideoRef"
          :video-url="dot_data.video_code"
          style="width: 100%; height: 100%; object-fit: fill"
          @on-playing="onHkPlaying"
          @on-play-error="onHKPlayError"
        />
      </template>
      <div class="video-header">
        <div class="label" :title="dot_data.name">{{ dot_data.name }}</div>
        <div class="video-header-right">
          <i v-if="hiddenCollect" :class="dot_data.isTag ? 'collectFill' : 'collect'" @click.stop="handleCollect" />
          <img class="video-enlarge" src="@/assets/images/video/enlarge.png" alt="" @click.stop="handleFullScreen" />
        </div>
      </div>
      <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 class="video-footer">
        <div class="label">{{ props.isIndex ? '首页' : '' }}</div>
        <div class="tags">
          {{ dot_data.tagLabels }}
        </div>
      </div>
    </div>
    <!--收藏弹窗-->
    <VideoTagEdit v-if="showCollectDialog" :id="dot_data.id" v-model="showCollectDialog" :tags="tags" @update-video-tag="getData2" />
    <!--点击全屏弹窗-->
    <video-dialog
      v-if="showFullScreenDialog"
      v-model="showFullScreenDialog"
      :video-monitor-data="dot_data"
      :is-no-live="isNoLive"
      @change-tags-data="getData"
    />
  </div>
</template>

<script setup lang="ts" name="HKVideo2">
import HikvisionPlayer from './hikvision-h5player.vue';
import VideoDialog from '@/components/HKVideo/video-dialog.vue';
import { getVideoTagInfo, getVideoUrlById } from '@/api/videoMonitor';

interface Tag {
  dict_label: string;
  dict_value: string;
}
interface DotData {
  id: string;
  video_code: string;
  tag?: Tag[];
  name?: string;
  status?: string;
  poster?: string;
  collect?: boolean;
  isTag?: boolean;
  tagLabels?: string;
}
interface Props {
  dot_data: DotData;
  width?: number;
  height?: number;
  autoplay?: boolean;
  isIndex?: boolean;
  hiddenCollect?: boolean;
  isNoLive?: boolean;
}

const props = withDefaults(defineProps<Props>(), {});
const emits = defineEmits(['update:dot_data', 'propClick', 'videoPreviewClick', 'favorClick', 'change']);

const wsUrl = ref('');
const isPlaying = ref(false);
const errBKVisible = ref(false);
const posterVisible = ref(true);
let videoPlayer = ref(null);
let flvVideoRef = ref(null);
const tags = ref([]);

watch(
  () => props.dot_data,
  () => {
    if (!!videoPlayer.value) {
      videoPlayer.value.stop();
    }
    if (!!flvVideoRef.value) {
      flvVideoRef.value.destoryVideo();
    }
    posterVisible.value = true;
    errBKVisible.value = false;
    isPlaying.value = false;
    nextTick(() => {
      if (props.autoplay) {
        play_now(true);
      }
    });
  },
  {
    deep: true
  }
);

const play = () => {
  play_now();
};

const refresh_data = () => {
  play_now();
};

const onHkPlaying = () => {
  errBKVisible.value = false;
};

const onHKPlayError = () => {
  errBKVisible.value = true;
  isPlaying.value = false;
};

// 全屏
let showFullScreenDialog = ref(false);
const handleFullScreen = () => {
  showFullScreenDialog.value = true;
};
// 开始播放
const play_now = async (check?: boolean) => {
  if (!props.dot_data || (props.dot_data && !props.dot_data.video_code)) {
    onHKPlayError();
  } else {
    posterVisible.value = false;
    errBKVisible.value = false;
    isPlaying.value = true;
    nextTick(() => {
      if (props.isNoLive) {
        flvVideoRef.value.handleVideoPlay(props.dot_data.video_code);
      } else {
        // 视频监控数据
        getVideoUrlById(props.dot_data.video_code).then((res) => {
          wsUrl.value = res.data;
          videoPlayer.value.play(wsUrl.value);
        });
      }
    });
  }
};
// 停止播放
const stop_now = async () => {
  if (isPlaying.value) {
    errBKVisible.value = false;
    videoPlayer.value.stop();
    isPlaying.value = false;
  }
  posterVisible.value = true;
};
// 截图
const handleScreenshot = (name) => {
  videoPlayer.value.handleScreenshot(name);
};

// 收藏
let showCollectDialog = ref(false);
// 展示收藏弹窗
const handleCollect = () => {
  showCollectDialog.value = true;
};
// 更新标签
const getData = (data) => {
  emits('change', data);
};
const getData2 = () => {
  getVideoTagInfo({ video_code: props.dot_data.id }).then((res) => {
    emits('change', res.data);
  });
};
const getPlayer = (name) => {
  return videoPlayer.value.getPlayer(name);
};

onMounted(() => {
  if (!!props.autoplay) {
    play_now(true);
  }
});

defineExpose({
  play,
  refresh_data,
  handleScreenshot,
  getPlayer,
  handleFullScreen
});
</script>

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

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

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

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

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

      .err_inner_box {
        width: 150px;
        height: 120px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .err_icon {
          width: 39px;
          height: 40px;
          background: url('@/assets/images/video/err_video.png') no-repeat;
          background-size: 100% 100%;
          margin-bottom: 10px;
        }

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

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

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

.img {
  width: 100%;
  height: 170px;
}

.video-header {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  .label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .video-header-right {
    display: flex;
    align-items: center;
    .collect {
      background: url('@/assets/images/video/collect.png') no-repeat;
    }
    .collectFill {
      background: url('@/assets/images/video/collectFill.png') no-repeat;
    }
    .collect,
    .collectFill {
      width: 38px;
      height: 38px;
      cursor: pointer;
      background-size: 100% 100%;
      cursor: pointer;
    }

    .video-enlarge {
      width: 34px;
      height: 34px;
      cursor: pointer;
      margin-left: 20px;
    }
  }
}
.video-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: #ffffffb3;
  font-size: 36px;
  background-color: rgba(0, 0, 0, 0.4);
  .label {
    width: 100px;
    flex-shrink: 0;
  }
  .tags {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
  }
}
</style>