tnbapp/src/components/VideoPreview.vue

<template>
  <div :id="videoProp.videoId" :ref="videoProp.videoId" style="height: 240px;" />
</template>

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

export default {
  name: 'VideoPreview',
  props: {
    videoProp: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      flvjs,
      DPlayer,
      dplayer: null
    }
  },
  created() {
  },
  mounted() {
    this.dplayer = new DPlayer({
      container: document.getElementById(this.videoProp.videoId),
      lang: 'zh-cn',
      screenshot: false,
      autoplay: false,
      volume: 0.1,
      mutex: true,
      video: {
        url: this.videoProp.url
      }
    })
  },
  destroyed() {
    this.dplayer.destroy()
  },
  methods: {
    initMp4Player(coverUrl, videoUrls) {
      return new DPlayer({
        container: document.querySelector('#dplayer'),
        lang: 'zh-cn',
        screenshot: false,
        autoplay: false,
        volume: 0.1,
        mutex: true,
        video: {
          pic: coverUrl,
          defaultQuality: 0,
          quality: videoUrls
        }
      })
    },
    initFlvPlayer(coverUrl, videoUrl) {
      return new DPlayer({
        container: document.getElementById('dplayer'),
        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>