video標籤是不能直接使用直播流的來播放的，需要使用hls轉碼過後才能播放

hls.js是一個可以實現HTTP實時流媒體客戶端的js庫，依賴於video標籤和Media Source ExtensionsAPI，它的工作原理是將MPEG2傳輸流和AAC/MP3流轉換成ISO BMFF (MP4)片段

優點： 原生開發引用的包比較少且體積小，很純淨，可以自定義UI和功能，更專注於HLS協議流，只支援HLS
缺點： 如果對UI要求高的話實現起來比較繁瑣，功能上也需要自己調API實現

安裝

CDN:
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>  

NPM:
npm install hls.js --save
 

使用

// html
<!--x5-video-player-fullscreen="true" 是用於微信瀏覽器相容使用的 -->
<video class="video" ref="video-player" controls playsinline x5-video-player-fullscreen="true" preload="auto"></video>

// js
methods: {
	initVideo(){
      let _this = this;
      _this.$nextTick(() => {
        _this.videoPlayer = _this.$refs.video-player;
        console.log(_this.videoPlayer);
        if(Hls.isSupported()) {
          let hls = new Hls();
          hls.loadSource('https://live.cgtn.com/1000/prog_index.m3u8'); // 直播流地址
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED,function() {
            // 成功
            _this.videoPlayer.play();
          });
           hls.on(Hls.Events.ERROR, (event, data) => {
            // 失敗
            console.log(event, data)
          });
        }
      });
    },
}