现代Web播放器

3 年前

玄冰尘灵

一、多媒体协议

RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输开发的开放协议。RTMP和FLV的格式都设计的非常的简洁和漂亮。

相对于 HLS 来说，采用 RTMP 协议时，从采集推流端到流媒体服务器再到播放端是一条数据流，因此在服务器不会有落地文件，延时较小，基于 TCP 长连接，不需要多次建连。

比较好的解决了http的传输问题，属于国内直播主要传输协议。延迟角度来看，HTTP-FLV要优于RTMP，以80http通信的，极好的穿透性，flv这个封装格式极其简单，对服务器开发人员友好，国内主流直播平台都是httpflv为主线路，比如斗鱼熊猫。

HLS (HTTP Live Streaming)，这是苹果推出的标准，目前各种手机浏览器产品对这种格式的兼容性也最好，允许用户从不同的备用源以不同的速率下载同样的资源片段，允许流媒体会话适应不同的数据速率，但它有个问题：延迟比较大，一般是20s - 30s左右的延迟。

基于HTTP的流媒体传输协议，工作原理是把整个流切分成一片片小的基于HTTP的文件来下载。

HLS清单称为播放列表，格式为m3u8（它们是m3u播放列表文件，以UTF-8编码）。

HLS本身是LIVE(直播)的，不过也支持VOD(点播)。

YouTube，Netflix或 Amazon Prime Video（及许多其他公司）使用的 DASH。DASH 的清单称为“Media Presentation Description”（或MPD），是其基本XML。

视频内容自适应流式处理的 ISO 标准，使用 MPEG-DASH，当网络阻塞时，视频流会自动调整到较低清晰度；当网络拥塞减少时，视频播放器将转而恢复到较高质量的流。

直播延时过大。

由Microsoft开发，平滑流传输”中，清单称为Manifests，并且基于XML。

Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

社区非常活跃，支持多个播放核心，而且插件非常多，有很多基于MSE的库能够很容易集成到播放器中，例如使用VHS支持hls.js和video.js事件，能够处理基本video标签以检测是否本地支持hls。。

bilibili 最早实现了基于 MSE 解决方案的播放器，用 native js 直接读了一遍 metadata, AAC Stream 和视频流…然后 remux，实现了在HTML5上播放 FLV 格式视频，使哔哩哔哩网页端平滑过度到HTML5播放器。

flv.js在HTML5上充分利用了 Media Source Extensions , Fetch API 以及 ECMAScript 6 等 HTML5/Web 上较新的技术，实现自定义视频格式播放。

对于视频直播，支持了延迟极低 HTTP-FLV 播放，解开网页端直播对Flash的依赖，通过HTTP-FLV，在手机网页端用html5播放，延迟是能控制在1秒内。

在HTML5上实现直播的目前已知的最优解决方案，性能不弱于原生app直播。带宽、存储其实比原生app普遍采用的mp4更优。

久负盛名，比如在Twitter上使用。

用 JavaScript 编写的开源 MPEG-DASH 视频播放器，由DASH行业论坛维护。

属于Google开源项目，基于 Media Source Extensions , Encrypted Media Extensions 实现，支持在浏览器播放 Dash 或者 HLS 协议的媒体服务，可以支持离线存储(借助 indexDB )。

百度云web播放器，可播放mp4、支持flv和hls点播、自适应hls，支持flv流直播、hls流直播和rtmp流直播。

腾讯云 Web 超级播放器，采用 HTML5 和 Flash 相结合的播放模式，支持播放 HLS、MP4 格式的点播视频和 RTMP、HTTP-FLV、HLS 协议的直播视频，手机浏览器兼容不太好，PC浏览器兼容很好。

编辑于 2020-03-18 12:27