視頻是很好的向用戶輸出內(nèi)容的方式之一，最近有一個(gè)web播放m3u8的視頻需求，記錄一下做的過程和踩到的坑。

1.m3u8

m3u8準(zhǔn)確來說是一種索引文件，使用m3u8文件實(shí)際上是通過它來解析對應(yīng)的放在服務(wù)器上的視頻網(wǎng)絡(luò)地址，從而實(shí)現(xiàn)在線播放。使用m3u8格式文件主要因?yàn)榭梢詫?shí)現(xiàn)多碼率視頻的適配，視頻網(wǎng)站可以根據(jù)用戶的網(wǎng)絡(luò)帶寬情況，自動為客戶端匹配一個(gè)合適的碼率文件進(jìn)行播放，從而保證視頻的流暢度

其實(shí)就是要站內(nèi)外保持一致，所以被迫研究了一下這種視頻視頻格式，據(jù)說是切片播放，效果可能會比mp4要好(個(gè)人看效果沒有覺得很好)。這種播放標(biāo)準(zhǔn)是蘋果提出的，安卓是不支持這種視頻格式的，需要處理下移動端兼容問題。

2.video.js

video.js 在原生的video上包裝了一層，暴露一些實(shí)用的api，可以看作一個(gè)提供基礎(chǔ)播放能力的播放器。

<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實(shí)例后監(jiān)聽各種事件

3.hls

h5的原生video只能播放mp4、ogg等格式的視頻文件，video.js 只是幫我們在video的基礎(chǔ)上封裝了一層，暴露了便利的接口和方法，但是不能幫助我們播放m3u8格式的視頻。我們需要用到流媒體網(wǎng)絡(luò)傳輸協(xié)議hls(HTTP Live Streaming)來支持。

參考：https://blog.csdn.net/aoshilang2249/article/details/82012187

4.踩到的坑

點(diǎn)擊播放后seek到指定地點(diǎn)

微信-Android

在微信中視頻會在最頂層，click和touch事件無法生效

微信-apple

無法自動加載，需要先點(diǎn)擊后加載、直接seek到指定timer無法生效

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。