視訊是很好的向用戶輸出內容的方式之一，最近有一個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無法生效