【技术科普】HLS视频流内m3u8文件和TS切片是什么关系?

TSINGSEE青犀视频云边端架构视频平台EasyNVR、EasyGBS、EasyDSS、EasyCVR等都是能够输出RTSP、RTMP、FLV、HLS等视频流的,其中输出的HLS视频流保存到本地与其他有所不同,本地文件是TS切片文件,需要通过m3u8文件进行检索。

云边端2.png

我们之前分享过一些关于TS文件的内容,大家有兴趣可以参考一下(无插件直播视频平台如何设置ts切片大小),本文主要是想和大家分享下m3u8文件和TS切片是怎样的存在,以及两者之间有什么关系。

TS切片文件

大多数视频网站都采用渐进式下载,这意味着视频会下载到我的设备上。视频一般采用流式传输,这意味着我们不只是下载了1个文件,而是下载了很多小包(本文指的是.ts传输流切片文件)。既然.ts文件只是一种视频切片文件,那么它支持直接播放吗?当我们把它下载到本地后,都是可以正常播放的。

m3u8文件

m3u8文件实质是一个播放列表(playlist),其可能是一个媒体播放列表(Media Playlist),或者是一个主列表(Master Playlist)。但无论是哪种播放列表,其内部文字使用的都是 utf-8 编码。 当 m3u8 文件作为媒体播放列表(Meida Playlist)时,其内部信息记录的是一系列媒体片段资源,顺序播放该片段资源,即可完整展示多媒体资源,由此可知,整个视频的总时长就是各个.ts切片资源的时长之和。

GBS4.png

M3U8和TS文件

HLS基于HTTP协议实现,传输内容包括两部分,一是M3U8描述文件,二是TS媒体文件。ts层的内容是通过PID值来标识的,主要内容包括:PAT表、PMT表、音频流、视频流。解析ts流要先找到PAT表,只要找到PAT就可以找到PMT,然后就可以找到音视频流了。

请求m3u8播放列表的方法

一是通过m3u8的URI进行请求,则该文件必须以.m3u8或.m3u结尾;
二是通过 HTTP 进行请求,则请求头 Content-Type 必须设置为 “application/vnd.apple.mpegurl” 或者 “audio/mpegurl”。

本文和大家大概聊了下TSINGSEE青犀视频云边端架构产品中HLS视频流内m3u8文件和TS切片的内容,我们欢迎大家和我们做深入的交流和探讨,如果大家还想了解更多视频相关解决方案,也欢迎联系我们。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Uniapp项目中引入dplayer.js和hls.js可以实现解析和播放m3u8直播流视频文件,具体步骤如下: 1. 首先,将dplayer.js和hls.js的相关文件引入到Uniapp项目中。可以通过npm安装这些库文件,也可以将它们下载到本地然后引入。 2. 在需要使用dplayer的页面中,使用uni.require将dplayer.js引入进来。例如,可以在页面的script标签中使用以下代码: ```javascript import DPlayer from '@/path/to/dplayer.js'; ``` 注意,@/path/to/指的是dplayer.js文件所在的路径。 3. 在页面中创建一个容器元素,用于渲染播放器。可以在template标签中添加一个div元素,例如: ```html <template> <div id="dplayer-container"></div> </template> ``` 这里给div元素设置一个id,以便之后使用。 4. 在页面的mounted钩子函数中,创建并初始化DPlayer实例。可以在mounted函数中添加以下代码: ```javascript mounted() { const container = document.getElementById('dplayer-container'); const options = { // 设置DPlayer的配置选项 }; const player = new DPlayer(options); player.init(); // 其他相关配置和操作 }, ``` 这里需要根据具体项目的需求,设置DPlayer的相关配置选项,比如视频的url、控制栏样式等。可以参考DPlayer的官方文档进行设置。 5. 使用hls.js解析m3u8直播流视频文件。在设置DPlayer的配置选项时,可以通过设置type为'hls'来启用hls.js的解析功能。例如: ```javascript const options = { // 其他配置选项 type: 'hls', url: 'http://example.com/video.m3u8', }; ``` 这里的url需要替换为实际的m3u8直播流视频文件的地址。 通过以上步骤,在Uniapp项目中成功引入dplayer.js和hls.js,并使用DPlayer来解析和播放m3u8直播流视频文件。修改相应的配置选项,可以根据需求进行定制化操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值