这是我参与「第四届青训营 」笔记创作活动的第24天
一、web多媒体发展史
flash---HTML5---Media Source Extensions
二、基础知识
1.编码格式
图像的概念:
图像分辨率是水平和垂直方向上的图像所具有的像素个数
图像深度是指存储每个像素所需要的比特数，图像深度决定了图像每个像素可能的颜色数，图像深度越大，图片色彩越丰富，但随之图片占据的存储空间也增加
2.视频的概念
分辨率：每一帧的图像的分辨率 帧率：视频单位时间内包含的视频帧的数量 码率：视频单位时间内传输的数据量，一般单位是kbps
编码格式：I/P/B帧 I帧是关键帧，P帧依赖前项帧，B帧依赖前后项帧，解码先解码I，再是P，再是B帧
GOP：两个I帧之间的间隔
冗余：空间冗余，时间冗余，编码冗余，视觉冗余即是视频中不重要的，重复的，单调的，肉眼无法察觉的信息进行高度压缩
处理流程：预测去除空间时间冗余，变换去除空间冗余，量化去除视觉冗余，熵编码去除编码冗余
3.封装格式
将视频，音频，字幕等，以某种形式装在一起，就是封装格式
4.多媒体元素和拓展API
vedio和audio标签
缺陷：不支持直接播放hls，fiv等视频格式，视频资源的请求和加载无法通过代码控制
媒体源扩展API：MSE
无插件在web端播放流媒体，支持播放hls，fiv，MP4等格式视频，课实现视频的分段架子啊，清晰度无缝切换，自适应码率，精确预加载
实现流程：创建mediaSourse实例，创建指向mediaSource的url，监听sourceopen事件，创建sourceBuffer，向sourceBuffer中加入数据，监听updaend事件
播放器播放流程 数据加载--解封装--重封装--appendBuffer--解码渲染--音视频同步
应用场景：点播，直播，图片，云游戏，实时通信，视频编辑
