tnbapp/src/components/LivePlayer.vue

<template>
  <div id="dplayer" ref="dplayer" style="height: 480px;" />
</template>

<script>
import flvjs from 'flv.js'
import DPlayer from 'dplayer'

export default {
  name: 'LivePlayer',
  props: {
    videoProp: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      flvjs,
      DPlayer,
      getUrl: true
    }
  },
  created() {
  },
  mounted() {
    const camId = this.videoProp.videoId
  },
  methods: {
    initFlvPlayer(videoUrl) {
      new DPlayer({
        container: document.getElementById('dplayer'),
        live: true,
        video: {
          url: videoUrl,
          type: 'customFlv',
          customType: {
            customFlv: function(video, player) {
              const flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: video.src
              })
              flvPlayer.attachMediaElement(video)
              flvPlayer.load()
            }
          }
        }
      })
    }
  }
}
</script>

<style>
</style>