H5直播开发

### H5直播开发

直播流种类:

1、RTMP

RTMP 是一个古老的协议。RMTP 最初由 Macromedia 开发,后被 Adobe 收购,至今仍被使用。
由于 RTMP 播放视频需要依赖 Flash 插件。而 Flash 插件多年来一直受安全问题困扰,正在被迅速淘汰。因此,目前 RTMP 主要用于提取 stream。也就是,当设置解编码器将视频发送到托管平台时,视频将使用 RTMP 协议发送到 CDN,随后使用另一种协议(通常是HLS)传递给播放器。

何时使用 RTMP:
RTMP 协议延迟非常低,但由于需要 Flash 插件,不建议使用该协议,但流提取是例外。在流提取方便,RTMP 非常强大,且几乎得到了普遍支持

2、HDS

Adobe 携带 HDS 再次进入了流协议世界。HDS 是 RTMP 的后继产品,也是依赖 Flash 的协议,但增加了码率自适应,并以高质量著称。

HDS 是延迟最低的流协议之一。但由于分段和加密操作,HDS 延迟并不如 RTMP 那样低。在流媒体体育比赛和其他重要事件中广受欢迎。

何时使用 HDS

通常,不建议使用 HDS。对于任何公司而言,采用基于 flash 的技术无法吸引用户,围绕 flash 搭建播放器不是一个好主意。

3、MPEG-DASH

MPEG-DASH 是最新的协议之一。尽管未被广泛使用,但该协议有一些很大的优势。
首先,MPEG-DASH 支持码率自适应。这意味着将始终为观众提供他们当前互联网连接速度可以支持的最佳视频质量。网络速度波动时 DASH 可以保持不间断播放。
其次,MPEG-DASH 几乎支持所有编解码器,还支持加密媒体扩展(Encrpted Media Extensions,简写EME)和媒体扩展源(Media Source Extension,简写MSE),这些扩展用于浏览器的数字版权管理标准API。

何时使用 MPEG-DASH?
如今只有一些广播公司在使用,将来或许会成为标准技术。但由于兼容性问题,这样的时刻还没有到来

4、MSS

Microsoft smooth streaming 技术于2008年推出。如今,以 Microsoft 为重点的开发人员和在 Xbox 生态系统的开发人员仍在使用,除此之外已逐渐失去用户。
Smooth streaming 支持码率自适应,并且拥有强大的数字版权管理工具。

何时使用 Smooth Streaming
除非目标用户是 Xbox 用户,或计划只开发 Windows 平台的 app,否则,不推荐使用该协议。

5、HLS

HTTP Live Streaming 由 Apple 开发,旨在能够从 iPhone 中删除 flash,如今已成为使用最广泛的协议。

桌面浏览器、智能电视、Android、iOS 均支持 HLS。HTML5 视频播放器也原生的支持HLS,但不支持 HDS 和 RTMP。这样就可以触达更多的用户。

HLS 支持码率自适应,并且支持最新的 H.265 解编码器,同样大小的文件,H.265 编码的视频质量是 H.264 的二倍。

此前,HLS 缺点一直是高延迟。但 Apple 在 WWDC 2019 发布了新的解决方案,可以将延迟从8秒降低到1至2秒

何时使用 HLS

HLS 是目前使用最广泛的协议,且功能强大。数据显示,如果视频播放过程中遇到故障,只有8%的用户会继续在当前网站观看视频。使用广泛兼容的自适应协议(例如HLS),可以提供最佳的受众体验

结论:由于本次做得是h5开发直播拉流,主要使用于安卓和苹果手机上,同时需要支持微信浏览器得正常播放,flash无法使用,RTMP/HDS率先排除,然后就是MSS只支持windows平台app也不合适,剩下MPEG-DASH和HLS,MPEG-DASH得兼容性问题有待确认,hls则基本可以实现需求,除了有较高得延迟。由于项目周期比较紧,并且电视台得流也是使用hls,最终项目采用hls流

播放器选择:
1、live-player
用于小程序直播拉流

2、video
app以及h5拉流

兼容性:
h5直播主要还是兼容性问题得处理
首先是全屏半屏问题:
视频直播,全屏还是半屏,取决于视频流文件得尺寸是否是全屏,前端只能控制视频得宽度,高度进行自适应,半屏得视频,需要手动点击全屏,此时不能隐藏控制栏,或者说需要前端自定义事件,进行全拼播放,这种情况下,是否能在手动全屏后添加聊天框等内容,还未验证

IOS自动浮窗问题:
ios如果不进行设置得话,播放是会有自动浮窗得情况,此时需要加上属性
video.setAttribute('playsinline', '')
video.setAttribute('webkit-playsinline', '')

IOS隐藏控制条无法播放问题:
IOS无法实现自动播放,需要添加播放按钮,或者放开control控制条进行手动播放

总结:使用hls流配合video标签进行h5直播开发,能够实现app、小程序、公众号直播拉流的需求,当然还是会有瑕疵,比如:ios环境需要手动触发直播播放、小程序环境也需要手动触发、视频全屏需要流的配合,无法依靠前端直接实现全屏


hls测试地址:https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8






 

posted @   左手边的温暖  阅读(552)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示