这是我参与「第四届青训营 」笔记创作活动的的第17天
01.Web多媒体历史
Flash 1994年开始-2020
网页三剑客 flash draemweaver fireworks
播放插件
Flash下坡路 ios不支持flash
Webp，ogg，mp4三种视频格式
Html5 2014年定稿
02.基础知识
01.编码格式
图像基本概念
- 图像分辨率：用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。
- 图像深度：图像深度是指存储每个像素所需要的比特数，图像深度决定了图像的每个像素可能的颜色树，或者可能的灰度级别。例如，彩色图像每个像素用RGB三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目位2的24次方，一幅单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数码为2的8次方，即256个。
视频基本概念
- 分辨率： 每一帧的图像分辨率 帧率：视频单元内包含的视频帧的数量。
- 码率：视频单位时间内传输的数据量，一般我们用kbps表示。
- I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
- P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码
- B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别
编码数据处理流程
编码格式
联合视频专家组 jvt
运动图像专家组 mpeg
Aom 开放媒体联盟 亚马逊、微软、google，思科，英特尔
02.封装格式
封装格式：存储音视频、图片或者字幕信息的一种容器
03.多媒体元素和扩展API
<video>元素
<audio>元素
方法
属性
事件
缺陷
- 不支持直接播放hls、flv等视频格式
- 视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载
媒体源扩展API
MSE（Media Source Extension）
- 无插件在web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
//创建mediaSource实例
let mineCodec = 'video/mp4; codes="avc1.42E01E,mp4a.40.2"';
let mediaSource = new MediaSource();
//创建指向mediaSource的URL
video.src = URL.createObjectURL(mediaSource);
//监听sourceopen事件
mediaSource.addEventListener('sourceopen',function(){
let mediaSource = this;
//创建sourceBuffer
let sourceBuffer = mediaSource.addSourceBuffer(mineCodec);
fetchAB('frag_bunny.mp4',function(buf){
//监听updateend事件
sourceBuffer.addEventListener('updateend',function(){
mediaSource.endOfStream();
video.play();
});
//向sourceBuffer中加入数据
sourceBuffer.appendBuffer(buf);
});
});
function fetchAB(url,cb) {
let xhr = new XMLHttpRequest;
xhr.open('get',url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(){
cb(xhr.response);
}
xhr.send();
}
//后面的这一段 codecs="...." 比较特别，以逗号相隔，分为两段：
//第一段，'avc1.42E01E'，即它用于告诉浏览器关于视频编解码的一些重要信息，诸如编码方式、分辨率、帧率、码率以及对解码器解码能力的要求。
//在这个例子中，'avc1' 代表视频采用 H.264 编码，随后是一个分隔点，之后是 3 个两位的十六进制的数，这 3 个十六进制数分别代表：
//AVCProfileIndication（42）
//profile_compability（E0）
//AVCLevelIndication（1E）
//第一个用于标识 H.264 的 profile，后两个用于标识视频对于解码器的要求。
//先，前面的 video/mp4 代表这是一段 mp4 格式封装的视频，同理也存在类似 video/webm、audio/mpeg、audio/mp4 这样的 mime 格式。
//下面来看 codecs 的第二段 'mp4a.40.2'，这一段信息是关于音频部分的，代表视频的音频部分采用了 AAC LC 标准：
//'mp4a' 代表此视频的音频部分采用 MPEG-4 压缩编码。
//随后是一个分隔点，和一个十六进制数（40），这是 ObjectTypeIndication，40 对应的是 Audio ISO/IEC 14496-3 标准。（不同的值具有不同的含义，详细可以参考官方文档）
//然后又是一个分隔点，和一个十进制数（2），这是 MPEG-4 Audio Object Type，维基百科中的解释是 "MPEG-4 AAC LC Audio Object Type is based on the MPEG-2 Part 7 Low Complexity profile (LC) combined with Perceptual Noise Substitution (PNS) (defined in MPEG-4 Part 3 Subpart 4)"，具体是什么意思就不翻译了，其实就是一种 H.264 视频中常用的音频编码规范。
//https://datatracker.ietf.org/doc/html/rfc6381
MSE播放流程
播放器播放流程
mp4和fmp4
04.流媒体协议
HLS 全称是 HTTP Live Streaming，是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。
