当前位置: 首页>前端>正文

html5 实时flv流 h5视频流

问题:最近在做视频直播,延迟问题很严重,pc端还好,延迟5s左右,在微信h5有时候延迟30s以上,所以来研究一下视频播放

         PC用的是flv.js播放的,微信使用h5 video播放

一、HTML5录制视频

    可以使用强大的webRTC,目前腾讯的实时音视频就是用的webRTC,但是兼容性不是很好

二、播放直播视频

目前有两种视频协议流,一种是HLS,另外一种是RTMP

1. HLS协议

(1) HLS协议就是把整个流分成一个个小的,基于HTTP文件来下载,每次只下载一些,一个文件就是.m3u8的文件,用于存放视频流元数据

     每一个.m3u8文件,分别对应若干个ts文件,这些文件才是真正存放视频的数据,m3u8文件只是存放了一些ts文件的配置信息和相关路径,当视频播放时,.m3u8是动态改变的,video标签会解析这个文件,并找到对应的ts文件来播放,所以一般为了加快速度,.m3u8放在web服务器上,ts文件放在CDN上。

     .m3u8文件其实就是以UTF-8编码的m3u文件,这个文件本身不能播放,只是存放了播放信息的文本文件

(2) HLS延迟

      hls是将直播流分成一段一段的小段视频区下载播放的,所以假设列表里面的包含5个ts文件,每个ts文件包含5s的视频内容,那么整体的延迟就是25s

      HLS只能在拉流端,造成慢的原因就是在等数据

(3) 优点

      可以在h5使用,直接用video就可以拉流,ios和android都支持这种协议,配置简单

2. RTMP协议

    Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server,并且在浏览器中只能使用 Flash 实现播放器。

    RTMP可以在双端(推流端和拉流端)

3. HttpFlv

    HttpFlv就是http+flv,将音视频数据封装成flv格式,然后通过Http协议传输给用户端,但聪明地你马上就会发现,虽然传输协议变了,但在flv数据格式下,脱离FlashPlayer还是无稽之谈。但在2016年,这一切都发生了改变,因为flv.js问世了!


https://www.xamrdz.com/web/2ty1951563.html

相关文章: