vue使用video.js解決m3u8視頻播放格式

今天被這個關於m3u8視頻播放不了搞了一下午，這個項目所有的視頻流都是m3u8格式的，后台給我們返回的都是m3u8格式的視頻流，解決了好長時間，看了好多博客，只有這個博客給我點啟發，去解決這個問題，請查看。會使用兩種方法來解決這個問題

• 第一種方法

1.在vue中安裝下面這些插件

cnpm install  video.js --save
ccnp  install videojs-contrib-hls --save

　網上有說video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最后結果測試，根本不需要什么低版本的高版本的，7版本以上的沒有任何問題。小編已經親自試驗過

2.頁面中使用

<video
          id="myVideo"
          class="video-js vjs-default-skin vjs-big-play-centered"
          controls
          preload="auto"
          style='width: 100%;height: auto'
          :poster="poster"
        >
        </video>

　2.1 poster設置封面圖，我在計算屬性判斷了一下，，如果后台上傳封面圖，就顯示，如果沒有上傳就顯示默認的圖片，這個是根據自己的需求來解決

computed: {
    poster: function() {
      return this.posterSrc
        ? this.posterSrc
        : require("./../assets/images/coveImg.png");
    }
  },

2.2在methods中定義一個方法，getViewList用於請求數據，拿到視頻流

2.3下載之后在頁面中引入，如果引入video.js有問題，就在html文件引入

<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

這樣就可以了

2.3video.js配置項

getVideo() {
      this.myVideo = videojs("myVideo", {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        hls: { withCredentials: true }
      });
    }

最重要的一點，標紅的，一定一定要使用，下載了安裝包，一定要在這個使用，才能失效。不然播放不了m3u8視頻格式

  mounted() {
    this.$nextTick(() => {
      this.getVideo();
    });
    this.getViewList();
  },

定義的兩個方法，放在mounted

• 第二種方法

上面是實現播放m3u8,接下來說第二種實現方法

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

地址請看   https://www.npmjs.com/package/hls.js/v/canary

引入上面那個文件

只需要寫這么多，然后再mounted生命周期調用，但是這個沒有video.js樣式好看，都可以解決播放不了m3u8視頻的格式問題。

以上都是來解決m3u8視頻播放不了的問題，