概念

m3u8

m3u8格式的视频是将文件分成一小段一小段的ts文件，播放完一个在播放下一个，由于每次请求的ts文件都很小，所以基本可以做到无延时播放。目前WEB上主流的直播方案主要是HLS和RTMP，移动端主要是HLS，PC端主要是RTMP。

HLS是苹果推出的，移动端不管是IOS还是Android都天然支持HLS协议，直接在h5页面直接配置即可使用；PC端只有safari浏览器支持，其他浏览器均不支持。

video.js

Video.js是一个基于HTML5构建的网络视频播放器。它支持HTML5和Flash视频，以及YouTube和Vimeo（通过插件）。它支持桌面和移动设备上的视频播放。

可以用video.js和videojs-contrib-hls.js 来实现在web端播放m3u8格式的视频。

其中videojs-contrib-hls.js是用于使用video.js来播放hls视频的，即使本地机器不支持。不过该项目将在video.js v7.*之后废弃，由videojs-http-streaming项目继承。VHS将支持HLS和DASH，并直接内置于video.js v7.*中。

本文将继续使用videojs-contrib-hls.js。关于新版的VHS，后期如有机会将再做尝试。

使用方法

引入相关资源

    <link href="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script>
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script>
    <!–[if lt IE 9]>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]–>

说明：

video-js.min.css 是播放器的主题样式
video.min.js 是video.js的核心代码
videojs-contrib-hls.js 用于支持HLS的库文件
html5shiv.min.js 由于video.js是基于H5构建的播放器，所以在浏览器不支持H5的时候，需要将相关资源引入到浏览器

放置播放器控件

<video  id="myVideo"  class="video-js vjs-default-skin vjs-big-play-centered"  width="400"
        controls="controls" autoplay="autoplay"
       x-webkit-airplay="true" x5-video-player-fullscreen="true"
       preload="auto" playsinline="true" webkit-playsinline
       x5-video-player-typ="h5">
    <source type="application/x-mpegURL" src="https://cn4.creativemas.cn/ppvod/DD7AB8D25F6AD21E4291775FEAC1F710.m3u8">
</video>

说明：

该控件中用于播放一个网络上找的m3u8的视频资源
给控件一个id主要方便video.js获取控件对象

使用`video.js`

<script>
    // videojs 简单使用
    var myVideo = videojs('myVideo',{
        bigPlayButton : true,
        textTrackDisplay : false,
        posterImage: false,
        errorDisplay : false,
    })
    myVideo.play() // 视频播放
    myVideo.pause() // 视频暂停
</script>

本文中的代码基本参照《前端如何播放m3u8格式的视频》

关于video.js参看：https://github.com/videojs/video.js