最近一個項目中需要在微信中播放m3u8格式的視頻，剛開始用了 vue-video-player 這個插件，在IOS手機體驗良好，本以為完事了， 結果安卓手機一點播放就自動全屏，心態略崩。查了資料說是安卓微信瀏覽器是X5內核與IOS的不同。折騰了好半天還是解決不了，心態已蹦。於是狠下心換個插件，便找到了video.js，港真，簡直完美。
1、首先安裝，在你的vue項目中
npm install --save video.js
npm install --save videojs-contrib-hls
2、在你需播放視頻的頁面中
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-contrib-hls'
3、HTML 如下：
<video id="my-video" class="video-js vjs-big-play-centered vjs-default-skin" controls="" preload="none" x5-playsinline="" playsinline="" webkit-playsinline="" poster="" x-webkit-airplay="allow" >
<source :src="tvPlayUrl" type="application/x-mpegURL">
</video>
注：上面紅色的class是讓播放按鈕居中，默認是在左上方。
4、在 mounted 中設置一下中文，不然出錯時提示英文不夠友好
//videojs設置中文
videojs.addLanguage('zh-CN', {
"You aborted the media playback": "視頻播放被終止",
"A network error caused the media download to fail part-way.": "網絡錯誤導致視頻下載中途失敗。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "視頻因格式不支持或者服務器或網絡的問題無法加載。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由於視頻文件損壞或是該視頻使用了你的瀏覽器不支持的功能，播放終止。",
"No compatible source was found for this media.": "無法找到此視頻兼容的源。",
});
5、因為本人的地址是異步獲取，所以在取得地址后：
var newUrl =‘假裝我是個M3U8的視頻地址‘;
_this.tvPlayUrl=newUrl; //給source的src賦值
var myPlayer = videojs('my-video', {
bigPlayButton: true, //是否顯示播放按鈕（這個播放按鈕默認會再左上方，需用CSS設置居中）
textTrackDisplay: true,
posterImage: true,
errorDisplay: true,
controlBar: true,
autoplay:true,//這個說是自動播放，但是本人使用無效
controls: true,
}, function () {
this.play()
})
myPlayer.src(newUrl);
myPlayer.load(newUrl);
以上就可以了，播放m3u8格式的視頻，親測安卓、IOS手機完美兼容且不會自動全屏。