流媒体视频播放 m3u8 ts格式

[zzugbb]

前置了解

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

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

hls

HLS 点播是常见的分段 HTTP 点播，就是将视频流分成不同的片段，客户端不断的去下载该片段，由于片段之间的分段间隔时间非常短，所以看起来是一条完整的播放流，实现的重点是对于媒体文件的分割。

同时，HLS 还支持多码率的切换，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。多清晰度就是这样实现的。

为了播放媒体流，客户端首先需要获得播放列表文件，也就是根据 HLS 生成的片段列表，该列表中包含每个流媒体的文件，客户端以类似轮询的方式不断重复加载播放列表文件并将片段追加实现流媒体的播放。

播放列表文件就是通常我们所说的 m3u8 文件，是以后缀 .m3u8 Content-Type是”application/vnd.apple.mpegurl” 的文件

VideoJS

Video.js是一个通用的在网页上嵌入视频播放器的 JS 库。

以下知名企业在用：

”ins”， “twitter”，”microsoft” ， “dropbox” , “github”

使用方式

• 原有工程：下载js引入
• 现代工程：npm 引入

具体使用

页面引入：

<link rel='stylesheet' href='/stylesheets/video-js.css' />
<script src="/javascripts/video.js"></script>
<script src="/javascripts/videojs-contrib-hls.js"></script>

<video id="example-video" width="600" height="300" class="video-js vjs-default-skin" controls>
  <source
    src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
    type="application/x-mpegURL">
</video>

<script>
  var player = videojs('example-video');
  player.play();
</script>

参考文档

• 前端如何播放m3u8格式的视频
• VideoJS@官网
• VideoJS HLS@官网
• videojs-contrib-hls@github