前端对流媒体播放的学习记录
前言
目的在于研究shakajs和dashjs、hlsjs在播放MPD和m3u8时候的优劣
流媒体（streaming media）
是指采用流式传输技术在网络上连续实时播放的媒体格式，如音频、视频或多媒体文件，采用流媒体技术使得数据包得以像流水一样发送, 如果没有流媒体技术, 那么我们就要像以前用迅雷下电影一样, 下载整个影片才能观看, 讲DASH之前先简单介绍一下常用的直播协议: HLS, RTMP, HDS协议. 因为DASH协议其实就是组合了以前的一些技术而发展出来的.
RTMP
RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频、视频和数据传输 开发的开放协议。是我们市面上绝大多数部分PC秀场使用的技术栈, 他有低延迟(2秒左后), 稳定性高, 技术完善, 高支持度, 编码兼容性高等特点.
HTTP-FLV
FLV (Flash Video) 是 Adobe 公司推出的另一种视频格式，是一种在网络上传输的流媒体数据存储容器格式。HTTP-FLV 即将流媒体数据封装成 FLV 格式，然后通过 HTTP 协议传输给客户端。HTTP-FLV这种方式较RTMP协议好的就是它采用公共的HTTP80端口, 有效避免被防火墙拦截, 可以通过 HTTP 302 跳转灵活调度/负载均衡，支持使用 HTTPS 加密传输，但它也有缺点, 视频的内容会缓存到用户本地, 保密性不好. HTTP-FLV的整体流程和RTMP协议一致, 但在客户端播放有些差异, 在MSE出现以前市场上一般都是用flash播放器去播放, MSE出现以后以及推广HTML5播放器的原因, 市场上开始使用JS软解FLV的方式, 通过HTMLVideoElement去播放.
HLS协议
HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分, HLS支持MPEG-2 TS标准(WWDC16 苹果宣布支持 Fragmented MP4), 移动端支持良好, 现在已经成为移动端H5直播的主要技术, 它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8)playlist文件，用于寻找可用的媒体流。主要是为了解决RTMP协议存在的一些问题, 比如RTMP协议不使用标准的HTTP接口传输数据(TCP、UDP端口：1935)，所以在一些特殊的网络环境下可能被防火墙屏蔽掉。但是HLS由于使用的HTTP协议传输数据(80端口)，不会遇到被防火墙屏蔽的情况.
HDS
Http Dynamic Streaming（HDS）是一个由Adobe公司模仿HLS协议提出的另一个基于Http的流媒体传输协议。其模式跟HLS类似，但是又要比HLS协议复杂一些，也是索引文件和媒体切片文件结合的下载方式。
在服务器端降一个视频文件分割成segment节，segment节表示的是这个视频的几种不同的分辨率模式，针对某种分辨率的segment节，可以再划分成fragmen片段，每个片段都是视频的一小段时间，分段后每个片段会有segment+fragment的索引，客户端会根据索引请求视频片段。索引文件可以是.f4m的manifest文件，也可以是.bootstrap文件，视频文件是使用附加的基于标准的MP4片段格式（ISO / IEC 14496-12：2008）扩展F4V格式，扩展名为.f4f。
DASH协议
DASH（MPEG-DASH）是 Dynamic Adaptive Streaming over HTTP的缩写，是国际标准组 MPEG 2014年推出的技术标准, 主要目标是形成IP网络承载单一格式的流媒体并提供高效与高质量服务的统一方案, 解决多制式传输方案(HTTP Live Streaming, Microsoft Smooth Streaming, HTTP Dynamic Streaming)并存格局下的存储与服务能力浪费、运营高成本与复杂度、系统间互操作弱等问题.
DASH是基于HTTP的动态自适应的比特率流技术，使用的传输协议是TCP(有些老的客户端直播会采用UDP协议直播, 例如YY, 齐齐视频等). 和HLS, HDS技术类似， 都是把视频分割成一小段一小段， 通过HTTP协议进行传输，客户端得到之后进行播放；不同的是MPEG-DASH支持MPEG-2 TS、MP4等多种格式, 可以将视频按照多种编码切割, 下载下来的媒体格式既可以是ts文件也可以是mp4文件, 所以当客户端加载视频时, 按照当前的网速和支持的编码加载相应的视频片段进行播放.
m3u8
现在的视频网站采用的是流媒体传输协议，就是将一段视频切成无数个小段，这几个小段就是ts格式的视频文件，一段一段的网站上播放。
这样做的好处是观看更加流畅，因为他会根据网络状况自动切换视频的清晰度，在网络状况不稳定的情况下，对保障流畅播放非常有帮助。
一个视频播放的全过程。
1.服务器采集编码传输视频到切片器 2.切片器对视频创建索引文件， 并且切割成n个ts文件 3.这2个文件传输到
http服务器上 4.网站/客户端根据索引文件查找http服务器上的ts文件，连续播放这n个ts文件，就可以了。索引文件里面存储着ts文件的
url链接，网站需要拿到索引文件，去按照url链接下载在http服务器中的ts文件。拿到了ts文件之后，本身这些ts文件就是原视频中的一小段视频，所有ts文件下载顺序播放，就完成了整个视频的播放。而索引文件就是m3u8文件。
MPD
在
MPEG-DASH中将一组不同编码参数的媒体内容和相应的描述集合定义为媒体展示（presentation）。这里的媒体内容是由单个或多个时间上连续的媒体时段（period）组成的，这些媒体时段的内容相互之间可能完全独立，例如在正片中插入的广告内容。每一个媒体时段包含一个或多个媒体内容组件（media content component），比如不同语言的音频组件、为同一节目提供不同视角的视频组件、不同语言的字幕组件等。每一个媒体内容组件都有对应的媒体组件类型（media content component type）标识，比如音频（audio）或视频（video）。每一个媒体内容组件可能有多个编码的版本（encoded version），被称为媒体流（media streams）。每一个媒体流继承了媒体内容、媒体时段和媒体内容组件的属性，同时还拥有自己的编码参数属性，例如码率、分辨率、编码器类型等等。MPD文件就是用来描述上面所提到的抽象概念和它们之间的关系的元数据文件。DASH系统中的MPD文件是用XML编写的，其中的关键元素和各元素之间的嵌套关系在上图中得到了展示。由上图可以看到，一个MPD文件包含了如下的关键元素：
媒体时段（Period）:媒体时段的概念如前所述，需要说明的是，在传输直播流时，可能会随着MPD文件更新而移除旧Period并加入新Period，通过这种方法达到直播的效果。一个媒体时段内可用媒体内容的编码版本不会变更，即可选的码率集合、语言集合、字幕集合不会再改变。 自适应集合（Adaptation Set）:在MPD文件中，一个媒体时段由一个或者多个自适应集合组成，每一个自适应集合对应前面所提到的媒体内容组件。 媒体文件描述（Representation）:在MPD文件中，每个自适应集合由一个或多个媒体文件描述构成，具体来说，具有相同语言、内容类型、图像宽高比属性的媒体文件描述才会被组织到同一个自适应集合中。每个媒体文件描述对应一个可独立解码播放的媒体流（其概念如前所述）。MPEG-DASH中的自适应切换就是根据网络环境或其他因素在同一个自适应集合的不同媒体文件描述之间进行切换。媒体文件描述是MPD中最小的抽象集合概念。 切片（Segment）：在MPD文件中，每个媒体文件描述由一个或多个一定时长的切片组成，每个切片都对应各自的URL，或对应同一URL的不同字节范围（byte range）。在MPEG-DASH中，一个切片就对应一次HTTP请求可以取回的最大数据单元。关于切片的时长，需要说明的是一个媒体文件描述中的切片往往具有完全相同或近似相同的时长，不同媒体文件描述之间的切片时长可能不同。切片时长可以任意定义，但是切片时长往往代表了端到端传输延时的下界，所以在直播应用时一般会选择比较短的切片时长。在前面提到所谓自适应切换就是在同一个自适应集合的不同媒体文件描述之间进行切换，更具体地说，就是在播放完一个媒体文件描述的一个切片之后紧接着播放另一个媒体文件描述的一个切片，在这样的切换机制下，可以避免在客户端同时下载、解码来自不同媒体文件描述的多个切片，使得切换动作的实现更加简单。 此外，MPEG-DASH中还定义了一些可选的结构，比如子描述（Sub-Representation）、子切片（Sub-Segment）等。
———————————————— 段落摘自:
「zhanghui_cuc」的《自适应流媒体传输（四）——深入理解MPD》 原文链接：blog.csdn.net/nonmarking/…
MPD文件表示媒体呈现描述。它是MPEG DASH流的清单文件。
通过chrome的任务管理器记录
| 名称 | 网络负载 | 静置网页 | 加载视频阶段 | 稳定播放阶段 | 播放完成阶段 | 页面销毁阶段 | |||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Shaka.js 单路 | Shaka.js 单路 | tab: 56,000k | GPU: 190,864k | tab: 106,576k | GPU: 260,640k | tab: 78,836k-83,792k | GPU: 210,924k | tab: 65,896k | GPU: 206,032k | tab: 58,864k | GPU: 194,416k |
| Dash.js 单路 | Dash.js 单路 | tab: 57,560k | GPU: 185,228k | tab: 104,576k | GPU: 230,640k | tab: 83,796k-96,836k | GPU: 202,924k | tab: 70,500k | GPU: 198,196k | tab: 57,016k | GPU: 184,508k |
| shaka.js 10路 | 40614 KiB | tab: 57,560k | GPU: 185,228k | tab: 104,576k | GPU: 230,640k | tab: 83,796k-96,836k | GPU: 202,924k | tab: 70,500k | GPU: 198,196k | tab: 57,016k | GPU: 184,508k |
-
使用shaka.js播放m3u8源的时候出现报错
Raw formats are not yet supported. Skipping audio/aa Skipping unsupported HLS stream audio/aac en/chunklist_w370587926_b160000_ao_slen_t64RW5nbGlzaA==.m3u8
\
