【前端】在Vue項目中使用vue-video-player實現視頻流播放

一、背景介紹
在項目開發的新一輪需求中增加了實時監控的功能，巧的是在GitHub上有一個開源項目vue-video-player，借此機會談談我在本次項目中的經驗以及在配置過程中出現的一些問題的解決方案。

二、查看源碼

<template>
  <video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="true"
                 customEventName="customstatechangedeventname"

                 @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)"
                 @ended="onPlayerEnded($event)"
                 @waiting="onPlayerWaiting($event)"
                 @playing="onPlayerPlaying($event)"
                 @loadeddata="onPlayerLoadeddata($event)"
                 @timeupdate="onPlayerTimeupdate($event)"
                 @canplay="onPlayerCanplay($event)"
                 @canplaythrough="onPlayerCanplaythrough($event)"

                 @statechanged="playerStateChanged($event)"
                 @ready="playerReadied">
  </video-player>
</template>

<script>
  // Similarly, you can also introduce the plugin resource pack you want to use within the component
  // import 'some-videojs-plugin'
  export default {
    data() {
      return {
        playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
          }],
          poster: "/static/images/author.jpg",
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      // listen event
      onPlayerPlay(player) {
        // console.log('player play!', player)
      },
      onPlayerPause(player) {
        // console.log('player pause!', player)
      },
      // ...player event

      // or listen state event
      playerStateChanged(playerCurrentState) {
        // console.log('player current update state', playerCurrentState)
      },

      // player is ready
      playerReadied(player) {
        console.log('the player is readied', player)
        // you can use it to do something...
        // player.[methods]
      }
    }
  }
</script>

大致理解一下，其實就是一個video-player組件，類似之前提到過的使用transition-group實現組件輪播效果。

三、移植使用
在組件使用前需要進行些許配置如下：
1、安裝vue-vide-player 和 videojs-flash 兩個包
npm install vue-video-player videojs-flash --save
2、將其引入並使用

//main.js
/* 引入並使用 vue-video-player */
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)

// 對應子組件中也需要引入
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
  components: {
    videoPlayer
  }
}

3、去掉不需要的部分，改裝成適用的形式

<template>
  <div id="video">
    <video-player
      autoplay
      muted
      class="video-player-box"
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
    ></video-player>
  </div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script>
import axios from 'axios' //axios請求所需引入
import 'video.js/dist/video-js.css'
import 'videojs-flash'
import { videoPlayer } from 'vue-video-player'
export default {
  data: function () {
    return {
      title: '',
      size: '',
      name: [1],
      videoShow: false,
      playerOptions: {
        // videojs options
        autoplay: true,
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        techOrder: ['flash', 'html5'], //設置順序，
        sourceOrder: true,
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [
          {
            type: 'rtmp/flv',
            src: '',//視頻流地址使用axios向后端請求的方式獲取
          },
          {
            withCredentials: false,
            type: 'application/x-mpegURL',
          },
        ],
        width: '160px',
        height: '90px',//設置視頻的寬高
        
      },
    }
  },
  components: {
    videoPlayer, //注冊組件
  },
  mounted() {
    axios.get('/camera/getrtmp?num=1').then((res) => {
      this.playerOptions.sources[0].src = res.data
      //設置該組件中videoPlayer播放視頻的源為從后端請求來的地址
    })
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    },
  },
}
</script>

四、幾個問題
1、希望點開網頁就可以看到播放畫面。但是谷歌瀏覽器(Chrome)不支持視頻流自動播放，據說是為用戶節省流量的同時在一定程度上限制了廣告。我們在瀏覽網頁時，如果開發者把視頻或音頻設置了自動播放，對於一些帶寬不是很理想的用戶，我們只能在不知情的情況下消耗了流量，主動權應該在我們。
2、在后端未能提供rtmp流地址時進行組件測試。這里推薦可以使用vlc播放器和已知可用的rtmp視頻流進行測試，這里提供湖南台的流地址供測試rtmp://58.200.131.2:1935/livetv/hunantv，經過vlc播放測試成功后將該地址寫死在

sources: [{
            type: 'rtmp/flv',
            src: '', //寫死在此處
          }]

中,即可不依靠后端進行組件測試。

這便是我一次簡單的視頻流前端架設過程，涉及專業知識表述如有不當之處，還望不吝賜教。