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

總結

以上是生活随笔為你收集整理的web播放m3u8视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。