1.简介
HTTP Live Streaming，也就是我们常说的HLS。HLS是苹果公司提出的基于HTTP的流媒体网络传输协议。类似于MPEG-DASH，但是HLS更加简洁，它的基本原理也是服务端把文件或媒体流按照不同的码率切分成一个个小片段进行传输，客户端在播放码流时，可以根据自身的带宽及性能限制，在同一视频内容的不同码率的备用源中，选择合适码率的码流进行下载播放。在传输会话开始时，客户端首先需要下载描述不同码流元数据的M3U8索引文件(类似于DASH中的MPD文件)。
与基于UDP的RTP协议不同，HLS请求仅使用HTTP传输，因此可以穿过任何允许HTTP数据通过的防火墙或代理服务器。这也便于使用传统的HTTP服务器作为源，并广泛使用基于HTTP的内容分发网络来传输媒体流。
虽然HLS有上述优势，但也同时存在延迟过大的劣势。采用HLS直播的视频流延时一般在10秒以上，使用推荐配置时延迟大概在30s，而RTMP直播的延迟最低可达到3、4秒，因此，在对实时性要求较高的场合，如互动直播，就要慎用HLS了。
1.1 HLS的格式
|
网络协议 |
HTTP |
|---|---|
|
封装格式 |
MEPG-2 TS |
|
编码格式 |
视频编码格式为H.264，音频编码格式为MP3、AAC、AC-3或EC-3 |
|
索引文件 |
M3U8 |
2. 流程
3. 前端集成（VUE前端框架）
3.1 依赖组件
3.1.1 方式一依赖包方式集成
- dependencies依赖包
"video.js":"^7.11.4",
"videojs-contrib-hls":"^5.15.0",
- devDependencies依赖包
"@types/video.js":"^7.3.17",
3.1.2 方式二 JS文件本地集成
目前已经集成测试，但是JS方式集成遇到了videojs对象获取问题，导致流程没有走通，有使用这种方式的可以交流一下经验。
3.2 代码集成
3.2.1 主程序入口 引入视频播放样式
import'video.js/dist/video-js.css';
3.2.2 页面集成
<video
:id="'myVideo' index"
class="video-js vjs-big-play-centered vjs-fluid"
playsinline
preload="auto"
width="200"
height="200"
data-setup="{}"
>
<sourcetype="application/x-mpegURL":src="HLSUrlCHange(item.hls_url)"/>
</video>
3.2.3 后台集成(根据需求可以自动加载播放或者手动控制视频播放)
this.getxueliangVideo.forEach((item:any,index:any)=>{
constdom=document.getElementById('myVideo' index);
if(dom) {
if(this.myPlayer!==null) {
dom.style.display='block';
}
}
this.$nextTick(()=>{
this.myPlayer=videojs(dom, {
// 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls:true,
// 自动播放属性,muted:静音播放
autoplay:true,
// 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
// preload: false,
// 设置视频播放器的显示宽度（以像素为单位）
// width: '200px',
// 设置视频播放器的显示高度（以像素为单位）
// height: '280px',
controlBar: {
playToggle:true,
}
});
// this.myPlayer.src({ src: this.mpegURL });
});
});
4. 踩坑点
- 跨域问题
- 视频窗口大小、样式等问题
- 视频播放流畅性问题
- 部署服务或客户端和视频流服务器网络问题
