移动直播的发展
单一的文字,图片,视频这种单一的交流方式已经满足不了广大网民的需求,偏向于
实时的互动交流的移动直播发展的比较火爆
什么是视频?
一组连续播放的动画
视频: 原始内容 先进行编码压缩, 再封装然后组成视频
帧率 frame rate: fps的单位,一秒钟内帧的个数
码率 bite rate : 单位时间内传输的数据量(体积)
分辨率 Bit rate: (像素)
图片群组: Group of picture &GOP: 一组图片的集合 (一帧一帧组成)
原始帧经过编码压缩后会变成 I帧(关键帧),B帧,P帧
GOP:从第一个I帧到下一个I帧的间隔。
帧数据: 压缩,编码后形成 GOP, GOP 封装后变成视频VIDEO
视频基础知识
H5与视频直播(易传播,动态发布)
直播:
动态改变的视频
实时传输
边生产,边消费
摄像头(编码) 视频流(传输) Server(推流)播放器
视频直播的结构:
视频录制端
视频播放器
视频服务器
采集流程:视频和音频是分开的,分开编码后,合成音视频包然后再上传给服务器
服务器: 接收和转发的作用
RTMP协议(PC端的flash,Native端使用系统播放器)
HLS协议(video标签)
协议 原理 延时 优点 使用场景
RTMP协议 长连接TCP 每个时刻受到数据后立刻发送 2s 延时低 即时互动
HLS协议 短连接HTTP 集合一段时间数据生成ts分片文件更新m3u8 10s~30s 跨平台 H5直播
H5视频弹幕:
注意事项:
移除视频外的弹幕需要清理dom和重用
移动类型的弹幕要确定好位置,防止重叠
固定位置弹幕的出现和消失时间
整个video作为背景,弹幕层盖在上面
弹幕文字使用translateX位移
利用css3和transition-duration控制弹幕速度
文字碰撞和重叠检测
webscoket实时获取弹幕数据
移动直播性能指标
一 视频首屏打开耗时
1.优化直播业务逻辑
2.精简资源加载,减少和延迟加载非直播逻辑的资源
3. 直播页直出
直播视频秒开
修改GOP策略
1.播放视频逻辑优先发起,优先级最高
2.修改播放器逻辑,拿到关键帧即开始播放
3.在服务器端缓存上一个GOP
4.合理设置一个GOP时间
二 直播视频的延迟
ts文件:5s
延时:15s~20s
优化HTTP请求?
HTTP/2: 二进制分帧(基于本文的协议封装成一帧一帧的协议)
多路复用(一个请求可以始终用一条请求,减少性能消耗)
头部压缩
服务端推送
三 直播页面的交互性能
评论内容数据获取:
使用webscoket
使用长轮训
定时器发起请求
评论和点赞的dom渲染
dom及时清理
使用局部滚动或者iscroll
css3动画和canvas
做好异常处理和错误提示
直播的交互逻辑和视频的播放逻辑区分开来
组件hybrid化
直播性能优化
直播系统搭建
IOS App
Nginx
HTML5