vue經常使用插件之視頻播放（rtmp m3u8）

vue-video-player(5.0.2)

最近個人項目作了一個監控視屏的顯示，後臺提供的視屏格式是rtmp
後來又改成m3u8，沒成功，緣由是佔用內存過大，因此取消了這種方式

1、安裝

npm i vue-video-player -S
npm i videojs-flash -S ______播放rtmp
npm i videojs-contrib-hls -S ______播放m3u8

2、全局引入(main.js)

import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' //videoJs的樣式
// import 'vue-video-player/src/custom-theme.css' //vue-video-player的樣式
import 'videojs-flash'; //引入才能播放rtmp視屏
// import 'videojs-contrib-hls' //引入才能播放m3u8文件
Vue.use(VideoPlayer)

3、在頁面中使用

<video-player  class="video-player vjs-custom-skin"
  ref="videoPlayer" 
  :playsinline="true" 
  :options="playerOptions"
  @play="onPlayerPlay($event)"
  @pause="onPlayerPause($event)"
  @ended="onPlayerEnded($event)"
></video-player>

//完整的配置數據（不要的能夠直接註釋掉）
data(){
  return {
    playerOptions:{
      playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
      autoplay: false, //若是true,瀏覽器準備好時開始回放。
      muted: false, // 默認狀況下將會消除任何音頻。
      loop: false, // 致使視頻一結束就從新開始。
      preload: 'auto', // 建議瀏覽器在<video>加載元素後是否應該開始下載視頻數據。auto瀏覽器選擇最佳行爲,當即開始加載視頻（若是瀏覽器支持）
      language: 'zh-CN',
      aspectRatio: '16:9', // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該表明一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
      // fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
      sources: [{
        type: "application/x-mpegURL",//這裏的種類支持不少種：基本視頻格式、直播、流媒體等，具體能夠參看git網址項目
        src: "" //url地址
      }],
      // hls:true, //若是是播放m3u8必須加（需註釋掉techOrder,否則會有報錯）
      techOrder: ['flash'], //播放rtmp必須加
      poster: "", //你的封面地址
      notSupportedMessage: '此視頻暫沒法播放，請稍後再試', //容許覆蓋Video.js沒法播放媒體源時顯示的默認信息。
      controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true  //全屏按鈕
      }
    }
  }
}

4、使用過程當中遇到的問題

一、設置了autoplay: true 不能自動播放，緣由是我這裏播放視頻的窗口小於了400x400
二、如何使用外部按鈕點擊全屏

//點擊全屏播放
handleFullScreen(index){
  const player = this.$refs.videoPlayer.player;
  player.requestFullscreen();//調用全屏api方法
  player.isFullscreen(true)
  player.play()
}

用來測試的流

香港財經：rtmp://202.69.69.180:443/webcast/bshdlive-pc
芒果TV：rtmp://58.200.131.2:1935/livetv/hunantv
韓國GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp