視頻是很好的向用戶輸出內容的方式之一，最近有一個web播放m3u8的視頻需求，記錄一下做的過程和踩到的坑。
1.m3u8
m3u8准確來說是一種索引文件，使用m3u8文件實際上是通過它來解析對應的放在服務器上的視頻網絡地址，從而實現在線播放。使用m3u8格式文件主要因為可以實現多碼率視頻的適配，視頻網站可以根據用戶的網絡帶寬情況，自動為客戶端匹配一個合適的碼率文件進行播放，從而保證視頻的流暢度
其實就是要站內外保持一致，所以被迫研究了一下這種視頻視頻格式，據說是切片播放，效果可能會比mp4要好(個人看效果沒有覺得很好)。這種播放標准是蘋果提出的，安卓是不支持這種視頻格式的，需要處理下移動端兼容問題。
2.video.js
video.js 在原生的video上包裝了一層，暴露一些實用的api，可以看作一個提供基礎播放能力的播放器。
<video :id="'video' + id" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" fluid>
<source :src="videoUrl" type="application/x-mpegURL">
</video>
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
const playerOptions = {
autoplay: false,
muted: false,
loop: false,
preload: 'auto',
language: 'zh-CN',
aspectRatio: this.aspectRatio, // 播放寬高比例 如 16:9 4:3
fluid: true,
sources: [{
type: 'application/x-mpegURL',
src: this.videoUrl // 視頻源頭
}],
poster: this.videoImage // 封面圖
}
this.video = videojs(`video${this.id}`, playerOptions)
拿到video實例后監聽各種事件
3.hls
h5的原生video只能播放mp4、ogg等格式的視頻文件，video.js 只是幫我們在video的基礎上封裝了一層，暴露了便利的接口和方法，但是不能幫助我們播放m3u8格式的視頻。我們需要用到流媒體網絡傳輸協議hls(HTTP Live Streaming)來支持。
參考：https://blog.csdn.net/aoshilang2249/article/details/82012187
4.踩到的坑
點擊播放后seek到指定地點
微信-Android
在微信中視頻會在最頂層，click和touch事件無法生效
微信-apple
無法自動加載，需要先點擊后加載、直接seek到指定timer無法生效