qa-regulatory-gwj-vue/src/views/map/dialog/video_play_plat.vue

<template>
  <div>
    <div v-if="gangkou != '00005'" class="level-title">
      <h1>摄像头名称：{{ info.NAME }}</h1>
    </div>
    <table v-if="gangkou != '00005'" class="table-ui">
      <tr>
        <td class="bbg-transparent">编码</td>
        <td >{{ info.INDEXCODE }}</td>
      </tr>
    </table>
    <div id="aLiVideoPlayer" ref="aLiVideoPlayer" style="" class="prism-player"/>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'

const imosPlayer = window.imosPlayer

let iframeObj = null
export default {
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    },
    gangkou: {
      type: String,
      default: ''
    },
    corpInfoId: {
      type: String,
      default: ''
    },
    requestUrl: {
      type: String,
      default: '/platformvideomanagement/getHlsPathById'
    }
  },
  data() {
    return {
      info: {},
      player: null,
      url: ''
    }
  },
  beforeDestroy() {
    this.player && this.player.dispose()
  },
  mounted() {
    if (this.gangkou === '00005') {
      this.showYsVideo()
    } else {
      this.showVideo()
    }
  },
  created() {
    // this.showVideo()

  },
  methods: {
    showYsVideo() {
      iframeObj = imosPlayer.createPanelWindow()
      var dom = document.getElementById('aLiVideoPlayer')
      iframeObj.style.margin = 'auto'
      dom.appendChild(iframeObj)
      imosPlayer
        .playLive(iframeObj.id, {
          camera: this.id,
          title: this.id,
          stream: 1
        })
        .then((e) => {
          console.log(e)
        })
    },
    showVideo() {
      let url = this.requestUrl
      console.log(this.corpInfoId)
      console.log(this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284')
      if (this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284') {
        url = '/czks/map/getCameraHlsPath'
      }
      requestFN(
        url,
        {
          PLATFORMVIDEOMANAGEMENT_ID: this.id,
          CORPINFO_ID: this.corpInfoId
        }
      ).then((res) => {
        this.info = res.pd
        let hlsPath = ''
        if (this.corpInfoId == 'f8da1790b1034058ae2efefd69af3284') {
          hlsPath = res.hlsPath
        } else {
          hlsPath = res.data.url
        }
        this.$nextTick(() => {
          // eslint-disable-next-line no-undef
          this.player = new Aliplayer({
            'id': 'aLiVideoPlayer',
            'source': hlsPath,
            'width': '100%',
            'height': '380px',
            'autoplay': true,
            'isLive': true,
            'rePlay': false,
            'playsinline': true,
            'preload': true,
            'controlBarVisibility': 'hover',
            'useH5Prism': true
          }, function(player) {
            console.log('The player is created')
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>