今天被這個關於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文件引入
這樣就可以了
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,接下來說第二種實現方法
地址請看 https://www.npmjs.com/package/hls.js/v/canary
引入上面那個文件
只需要寫這麼多，然後再mounted生命週期調用，但是這個沒有video.js樣式好看，都可以解決播放不了m3u8視頻的格式問題。
以上都是來解決m3u8視頻播放不了的問題，