web播放m3u8视频

视频是很好的向用户输出内容的方式之一，最近有一个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无法生效