这是我参与「第四届青训营」笔记创作活动的的第15天

Web多媒体历史

web多媒体的发展历程是:Flash->HTML5->Media Source Extensions

Flash

Flash在今天给人的印象是臃肿而又低效的，但在Flash刚刚诞生的时候，却是有着小巧、高效、跨平台等特点，深受人们喜爱，单调的网页一旦使用了Flash，面貌往往会焕然一新。Flash一度成为了互联网中最耀目的多媒体技术，是否使用了Flash，甚至成为了人们来衡量一个网站先进与否的标准。但是随着iPhone的流行，Flash在移动市场迅速衰退。因为人们发现原来增加续航的最好方法不是增大电池，而是抛弃Flash。如今Flash已经基本被淘汰了。

HTML5

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。如今HTML5已经被广泛应用。

Media Source Extensions

MSE(Media Source Extensions)，即媒体源扩展，可以理解为一种API，其提供了实现无插件且基于 Web 的流媒体的功能。通过 MSE，媒体串流能够通过 JavaScript 创建，并且可以使用 HTML5的<audio>和<video> 标签进行播放。是现在广为应用的一种功能，实现流媒体的流转。

基础知识

编码格式

图像基本概念

图像分辨率：指图像中存储的信息量，是每英寸图像内有多少个像素点
图像深度：是指像素深度中实际用于存储图像的灰度或色彩所需要的比特位数

视频基本概念

分辨率：每一帧的图像分辨率
帧率：视频单位时间内包含的视频帧的数量
码率：就是值单位时间内传输的数据量，一遍用bps表示

编码数据处理流程

预测：去除空间冗余、时间冗余
变换：去除空间冗余
量化：去除视觉冗余
熵编码：去除编码冗余

封装格式

封装格式：存储音视频、图片或者字幕信息的一种容器主要封装格式：AVI、WMV、MPG、MKV、RM、MOV、FLV等

多媒体元素和扩展API

依赖video、audio标签、MSE的扩展标签。

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg"> 
    您的浏览器不支持 video 标签。 
</video>

<audio controls> 
    <source src="horse.ogg" type="audio/ogg"> 
    <source src="horse.mp3" type="audio/mpeg"> 
    您的浏览器不支持 audio 元素。 
</audio>

video和audio的事件：

loadstart 浏览器开始在网上寻找媒体数据
progress 浏览器正在获取媒体数据
suspend 浏览器暂停获取媒体数据，但是下载过程并滑正常结束
abort 浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的
error 获取媒体数据过程中出错
emptied video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误2.在浏览器正在选择支持的播放格式时，又调用了load方法重新载入媒体
stalled 浏览器尝试获取媒体数据失败
play 即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性
pause 播放暂停，当执行了pause方式时触发
loadedmetadata 浏览器获取完毕媒体的时间长和字节数
waiting 播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧
canplay 浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲
canplaythrough 浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲
seeking seeking属性变为true，浏览器正在请求数据
seeked seeking属性变为false，浏览器停止请求数据
timeupdate 由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
ended 播放结束后停止播放
ratechange defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变
druationchange 播放时长被改变
volumechange volume属性（音量）被改变或muted属性（静音状态）被改变

video和audio的缺点：

不支持直接播放hls、flv等视频格式
视频资源的请求和加载无法通过代码进行控制：如分段加载、清晰度无缝切换、精确预加载

MSE扩展API:

无插件在web端播放流媒体
支持播放hls、flv、MP4等格式视频
可是实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

流媒体协议

常用的流媒体协议：HLS、HTTP_FLV、Dash、RTMP等
HLS协议：HLS (HTTP Live Streaming)是Apple的动态码率自适应技术。主要用于PC和Apple终端的音视频服务。包括一个m3u(8)的索引文件，TS媒体分片文件和key加密串文件。
HTTP_FLV协议：HTTP-FLV 即将流媒体数据封装成 FLV 格式，然后通过 HTTP 协议传输给客户端。HTTP-FLV 即将流媒体数据封装成 FLV 格式，然后通过 HTTP 协议传输给客户端。
Dash协议:Dash（Dynamic Adaptive Streaming over HTTP）全称为“基于HTTP的动态自适应流”，是一种自适应比特率流技术，可以是高质量流媒体可以通过传统的HTTP网络服务器以互联网传递，支持TS profile和ISO profile。

应用场景

点播
视频编辑
实时通信
云游戏
图片
直播
web多媒体

Web多媒体入门|青训营笔记