tmzn-weihe/src/views/video-play-popup/index.vue

<template>
  <div class="video-player-container" v-if="visible">
    <div class="video-player-title">
      <span class="title-text">{{ title }}</span>
      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="openTsModal" />
    </div>
    <Artplayer :option="option" :style="style" @getInstance="getInstance" />
    <el-dialog title="提示" :visible.sync="tsModalVisible" width="60%">
      <span>是否中断当前巡查点监控，进行下一个巡查点视频播放？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeVideoDialog">中断当前视频</el-button>
        <el-button @click="toNext">播放下一个视频</el-button>
        <el-button @click="tsModalVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Artplayer from '@/components/video-player/video-player.vue'
import flvjs from 'flv.js'
export default {
  name: 'WaterStationPopup',
  data() {
    return {
      visible: false,
      title: '巡查点',
      option: {
        url: 'ws://10.157.200.5:9381/live/43010000831327000018_0_0_39f33131b0ac4611a4e7da4d692a1195.flv',
        isLive: true, //使用直播模式，会隐藏进度条和播放时间
        autoplay: true,
        muted: true, //是否静音
        type: 'flv',
        autoSize: true,
        customType: {
          flv: (video, url, art) => {
            if (flvjs.isSupported()) {
              if (art.flv) art.flv.destroy()
              const flv = flvjs.createPlayer({ type: 'flv', url })
              flv.attachMediaElement(video)
              flv.load()
              art.flv = flv
              art.on('destroy', () => flv.destroy())
            }
          }
        }
      },
      tsModalVisible: false,
      style: {
        width: '600px',
        height: '350px'
      }
    }
  },
  components: {
    Artplayer
  },
  mounted() {
    this.$globalEventBus.$on('clickVideoPlay', (data) => {
      console.info(data)
      this.visible = data.visible
      this.tsModalVisible = false
      this.title = data.point?data.point.devName:''
    })
  },
  destroyed() {
    this.$globalEventBus.$off('clickVideoPlay')
  },
  methods: {
    getInstance(art) {
      console.info(art)
    },
    openTsModal() {
      this.tsModalVisible = true
    },
    toNext() {},
    closeVideoDialog() {
      this.visible = false
    }
  }
}
</script>

<style scoped lang="scss">
.video-player-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  width: 600px;
  z-index: 9999;
  .video-player-title {
    background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
    background-size: 100% 100%;
    height: px-to-rem(39);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px-to-rem(20);
    font-size: px-to-rem(16);
    color: #fff;
    .title-text {
      font-weight: bold;
      margin-left: px-to-rem(20);
    }
  }
}
</style>