Web多媒体

基础知识

编码格式

图像基本概念

• 图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

• 图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位像素深度为24位可以表示的颜色数目为2的24次方，既16777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。

视频基本概念

• 分辨率：每一帧的图像分辨率
• 帧率：视频单位时间内包含的视频帧的数量
• 码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。

编码格式

I帧：独立渲染

P帧：依靠前一帧渲染

B帧：依靠前后帧进行渲染

GOP：两个I帧的间隔

冗余类型：空间/时间/编码/视觉

编码数据处理流程

    预测（去除空间冗余、时间冗余）->变换（去除空间冗余）->量化（去除视觉冗余）->熵编码（去除编码冗余）
    

封装格式

封装格式：存储音视频、图片或者字幕信息的一种容器

多媒体元素和拓展API

<audio>和<video>元素

play() 开始播放音频/视频

pause（）哲停当前播放的音频/视频

load() 重新加载音频/视频元素

canPlayType() 检测浏览器是否能播放指定的音频/视频类型

addTextTrack() 向音频/视频添加新的文本轨道

autoplay 设置或返回是否在加载完成后随即擂放音频/视频

controls 设置或返回音频/视频是否显示控件（比如播放/ 暂停等）

currentTime 设置或返回音频/视频中的当前播放位置（以秒计）

duration 返回当前音频/视频的长度（以秒计）

src 设罝或返回音频/视频元素的当前来源

volume 设置或返回音频/视频的音量

buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象

playbackRate 设置或返回音频/视频播放的速度。

error 返回表示音频/视频错误状态的 MediaError 对象

readyState 返回音频/视频当前的就绪状态

<audio>和<video>元素缺陷

不支持直接播放hls、flv等视频格式

• 视频资源的请求和加载无法通过代码控制
• 分段加载（节约流量）
• 清晰度无缝切换
• 精确预加载

媒体源扩展API (Media Source Extensions)

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

播放器播放流程 数据加载——>解封装->重封装->appendBuffer->解码渲染->音视频同步

流媒体协议

HLS 全称是 HTTP Live Streaming，是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域