Vue使用 video-player 播放 M3U8 視頻流

因為前端頁面如果是接入視頻流的話，說難也難，說不難也不難。
如果單純提供視頻流url連接，沒有中間件進行轉的話：
rtsp 是不能直接接近web的，因為web不能直接接入rtsp視頻流，需要后端或者是中間件進行轉化，把rtsp的視頻流轉換成其他前端可以接入的視頻流格式，一般是hls，也就是m3u8。
rtmp格式視頻流以前是可以接入的，但是現在不行了，因為大多數瀏覽器在2020年底陸續宣布不在支持flash插件，但是rtmp視頻流必須使用flash插件播放，因此在瀏覽器不支持flash的前提下，rtmp格式的視頻流也就不能在web端播放了，很遺憾！
所以說，現在視頻流播放一般都會采用M3U8格式的視頻流進行播放，當然了，確定也就暴露出來了，那就是資源消耗的比較大，延時性比較高，畢竟是后端對其他視頻流進行轉換得到的，轉換、傳輸、展示都需要時間，延時都會在10秒左右，如果單純看的話沒問題，控制的話就體驗性差了，你控制了一下，十秒鍾之后才能看到移動的角度，難受，但是沒辦法。
但是電腦軟件接入rtsp或者是rtmp是沒有問題的，這個東西是瀏覽器不在支持，與其他東西無關。
加油，祝你好運！

安裝插件

npm install vue-video-player -S

npm install 'video.js' -S

使用

首先引入

  // require styles
  import 'video.js/dist/video-js.css'
  import 'vue-video-player/src/custom-theme.css'
  //引入hls.js
  import 'videojs-contrib-hls'
  // video-player
  import { videoPlayer } from 'vue-video-player'

然后在data創建一個對象對播放器進行設置

		playerOptions: {
          language: 'zh-CN',  // 語言
          playbackRates: [0.5, 1.0, 1.5, 2.0],  // 可選的播放速度
          sources: [{
            type: "application/x-mpegURL",   // 類型
            withCredentials: false,
            src: 'http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8' // 中央1 M3U8連接
          }],
          techOrder: ['html5'],
          flash: { hls: { withCredentials: false } },
          html5: { hls: { withCredentials: false } },
          autoplay: true,  // 是否自動播放
          controls: true,  // 是否顯示控制欄
          notSupportedMessage: '無信號',
          muted: true, // 是否靜音
        }

然后HTML創建一個播放器。

<video-player ref="videoPlayer" style="width: 100%;height: 100%;" class="vjs-custom-skin" :options="playerOptions"></video-player>

然后頁面就可以正常顯示視頻了！

這里有一篇更詳細的介紹博文：https://www.jianshu.com/p/9f9e996768ba

然后給大家幾個測試的 m3u8 連接： M3U8測試連接

我自己在項目里面測試過，是沒有問題的，都是經過當時驗證的。

好了，希望可以有用。