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

<template>
  <div class="video-player-container" v-if="visible">
    <Artplayer :option="option"  :style="style" @getInstance="getInstance" />
  </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",
        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())
            }
          }
        }
      },
      style:{
        width: '600px',
        height: '400px',
        margin: '60px auto 0',
      }
    }
  },
  components:{
    Artplayer
  },
  mounted() {
    this.$globalEventBus.$on('clickVideoPlay', (data) => {
      this.visible = true
      this.title = '巡查点'
    })
  },
  destroyed() {
    this.$globalEventBus.$off('clickVideoPlay')
  },
  methods: {
    getInstance(art){
      console.info(art)
    }
  }
}
</script>

<style scoped lang="scss">
.video-player-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  width: px-to-rem(600);
  z-index: 9999;
}
</style>