最近有个小需求，需要用到视频播放器，之前自己确实没接粗过这一块，于是在想 HTML5 提供了原生 video 标签的情况下，我们还需要 video.js 这些库了吗。顺带了解几种视频流
为什么还需要
我们比较一下 video.js 和原生 video 标签的区别
- video.js 有更好的以及统一的外观、控制能力
- video.js 支持降级成 flash 播放
- video.js 修复了浏览器的不一致性
- video.js 通过插件的方式支持播放 HLS、DASH、360 视角、直播以及全景
- 其他特性：全屏、字幕、第三方播放器的支持（TouTube、QuickTime）
了解几种视频流
HLS
HLS（Http Live Streaming) 是一个由苹果公司提出的基于HTTP的流媒体网络传输协议，直接把流媒体切片成一段段，信息保存到m3u列表文件中， 可以将不同速率的版本切成相应的片；播放器可以直接使用 http 协议请求流数据。
优势：
- 可以在不同速率的版本间自由切换，实现无缝播放
- 省去使用其他协议的烦恼
劣势:
- 延迟大小受切片大小影响，不适合直播，适合视频点播。
- 实时性差，延迟高。HLS 的延迟基本在 10s+ 以上
- 文件碎片。特性的双刃剑，ts 切片较小，会造成海量小文件，对存储和缓存都有一定的挑战
RTMP
RTMP（Real Time Message Protocol）由 Adobe 公司提出流媒体协议，并且是私有协议，未完全公开，用来解决多媒体数据传输流的多路复用（Multiplexing）和分包（packetizing）的问题，RTMP 协议一般传输的是 flv，f4v 格式流。一般在 TCP 1个通道上传输命令和数据。
优势：
- 在于低延迟，稳定性高，支持所有摄像头格式
- 专为流媒体开发的协议，对底层的优化比其它协议更加优秀
劣势：
- 浏览器需要加载 flash 插件才能播放。
- RTMP 为 Adobe 私有协议，很多设备无法播放，特别是在 iOS 端，需要使用第三方解码器才能播放
- 基于 TCP 传输，非公共端口，可能会被防火墙阻拦
RTSP
RTSP（Real-Time Stream Protocol）由Real Networks 和Netscape共同提出的流媒体协议，RTSP 协议是共有协议，并有专门机构做维护。是 TCP/IP 协议体系中的一个应用层协议. RTSP 协议一般传输的是 ts、mp4 格式的流，RTSP传输一般需要 2-3 个通道，命令和数据通道分离。基于文本的多媒体播放控制协议. RTSP 定义流格式，流数据经由RTP传输；
优势:
- RTSP 实时效果非常好，适合视频聊天，视频监控等方向。
劣势：
- 浏览器不能直接播放，只能通过插件或者转码
播放解决方案
HLS 与 RTMP 的播放解决方案
- 使用原生 video
- 原生H5支持的媒体格式主要有 MP4、OGG、WebM、M3U8
- M3U8 格式播放在 pc 端浏览器上支持兼容性差
- 无法播放 rtmp 流的视频，因为原生不支持 flv
- 使用原生video，不用安装第三方插件
- 使用 flv.js
- flv.js 是来自 Bilibli 的开源项目。它解析 FLV 文件喂给原生 HTML5 Video 标签播放音视频数据，使浏览器在不借助 Flash 的情况下播放 FLV 成为可能
- 录播，依赖原生HTML5 Video标签 和 Media Source Extensions API
- 直播，依赖录播所需要的播放技术，同时依赖 HTTP FLV 或者 WebSocket 中的一种协议来传输FLV。其中 HTTP FLV 需通过流式 IO 去拉取数据，支持流式 IO 的有 fetch 或者 stream
- 由于依赖 Media Source Extensions，目前所有 iOS 和 Android4.4.4 以下里的浏览器都不支持，也就是说目前对于移动端 flv.js 基本是不能用的。
- 由于浏览器对原生Video标签采用了硬件加速，性能很好，支持高清
- 同时支持录播和直播
- 去掉对Flash的依赖
- video.js