yarn add video.js
yarn add videojs-contrib-hls // 這是播放hls流需要的插件
yarn add videojs-flash // 這是播放rtmp流需要的插件
yarn add mux.js // 在vue項(xiàng)目中，若不安裝它可能報(bào)錯(cuò)

import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);

<template>
  <video id="videoPlayer" class="video" muted width="100%" height="580px" />
</template>

<script>
import Videojs from 'video.js'

export default {
  data() {
    return {
      player: null
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose() // Removing Players,該方法會(huì)重置videojs的內(nèi)部狀態(tài)并移除dom
    }
  },
  activated() {
    if (this.player) {
      this.player.play()
    }
  },
  deactivated() {
    if (this.player) {
      this.player.pause()
    }
  },
  mounted() {
    this.initVideo()
  },
  methods: {
    initVideo(url) {
      if (!this.player) {
        this.player = Videojs('videoPlayer', {
          autoplay: true, // 設(shè)置自動(dòng)播放
          muted: true, // 設(shè)置了它為true，才可實(shí)現(xiàn)自動(dòng)播放,同時(shí)視頻也被靜音 （Chrome66及以上版本，禁止音視頻的自動(dòng)播放）
          preload: 'auto', // 預(yù)加載
          controls: false // 顯示播放的控件
        })
      }
      this.player.src([{
        src: url,
        type: 'application/x-mpegURL' // 告訴videojs,這是一個(gè)hls流
      }])
    }
  }
}
</script>

<style lang="scss" scoped>
.video, video {
  width: 100%;
  height: 580px;
}
/deep/ .vjs-loading-spinner {
  position: relative;
  .vjs-control-text {
    opacity: 0;
  }
}
</style>

// main.js
import flash from "videojs-flash"; // 播放rtmp流需要的插件
import Vue from "vue";
Vue.use(flash);

this.player.src([{
    src: url,
    type: 'rtmp/flv' // 告訴videojs這是一個(gè)rtmp流視頻
}])