HTML5 视频直播

一、视频基础知识：

内容元素：图像、音频、元信息

编解码器：视频、音频

容器文件格式：MP3、MP4、FLV、AVI

二、flash和video的差别

Flash	video
移动端兼容性差	移动端兼容性好
可以播放直播视频，延迟低	可以播放直播视频，延迟高
学习Flash开发语言，有一定成本	提供基于js的api，前端开发更容易

三、使用video常见问题

1、视频内联播放

在ios的Safari中无法内联，webview可以定制，解决如下：

webview.allowsInlineMediaPlayback = YES
<video webkit-playsinline src="">

android天然支持内联播放，但不排除部分机型使用系统播放器播放。

2、视频自动播放

设置autoplay属性（ios）

andriod中自动播放需求，事件回调里执行play()

webview.mediaPlaybackRequiresUserAction = No

3、视频宽高设置

单独设置高或宽，保持其纵横比

4、视频全屏问题

伪全屏：通过设置样式和布局将视频内容撑满屏幕，无法覆盖webview；   （弹幕文字）

真全屏：一般是调用系统的native播放器来打到全屏观看，覆盖在webview之上。

真全屏的三个事件：

video.webkitEnterFullScreen();

webkitbeginfullscreen事件

webkitendfullscreen事件

5、视频常用事件

canplaythrough当浏览器预计能够在不停袭来进行缓冲的情况下持续播放指定的视频时，会触发。（在ios上兼容良好，但andriod上不兼容）

timeupdate当目前播放位置已更改时会触发。

6、video开源组件推荐

用videoJs解决

四、视频直播结构(PC端）

1、视频录制端   Native、webRTC

2、视频播放端   flash、video、Native

3、视频服务器端  nginx

webRTC是网页实时通信，提供js的api获取视频数据，利用webscoket数据交互

在 WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

五、Native端录制视频（移动端）

1、系统提供丰富的API接口可以调用

2、提供丰富的编解码功能。

3、性能比web页面要好

六、RTMP协议和HLS协议

	协议	原理	延时	优点	使用场景
RTMP	长链接TCP	每个时刻收到数据后立即发送	2s	延时低	即时互动
HLS	短连接HTTP	集合一段时间数据生成ts分片文件更新m3u8	10s-30s	跨平台	h5直播

七、移动直播性能指标

1、视频首屏打开耗时

2、直播视频秒开

3、HLS直播延时

PS:

HTTP/2比HTTP1的重大改进：

1、多路复用：允许同时通过单一的 HTTP/2 连接发起多重的请求-响应消息。

2、二进制分帧：

 3、首部压缩

4、服务器推送：服务器可以对客户端的一个请求发送多个响应。