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

编码格式

图像基本概念

图像分辨率：用于确定组成一幅图像的像素数据，定义了图像再水平和垂直方向所具有的像素个数。

图像深度：指储存每一个像素所需要的比特数，图像深度决定了每个像素可能的颜色数或者是可能的灰度级数。

视频基本概念

分辨率：每一帧图像的分辨率。

帧率：视频单位时间内包含的视频帧的数量。

码率：视频单位时间内传输的数据量，一般用kbps来表示。

I帧、P帧、B帧

• I帧表示关键帧解码时只需要本帧数据就可以完成
• P帧码时需要用之前缓存的画面叠加上本帧定义的差别，生成最终画面。
• B帧是双向差别帧，也就是B帧记录的是本帧与前后帧的差别

GOP（group of picture）

两个I帧之间的间隔

为什么要编码

我们来举个例子，如果有一部电影，它的分辨率大小是1920*1080

那么每一帧的大小就有1920 * 1080 * 24 / 8=6220800Byte（5.9M），如果这个视频的帧率是30fps，时长在90分钟的话，这部影片的大小就要有933G，这是当前个人设备难以储存的大小。现在主流的手机配置是256G的储存，而笔记本电脑附带的储存空间一般是512G。

空间冗余

时间冗余

可以看到两帧之间背景并无大的变化，只有球杆有位置的变化。

编码冗余

这副图像中只有蓝白二色，如果用rgb来编码的话，有着空间浪费。

视觉冗余

视觉冗余指的是图片中一些人感知不到或者不敏感的部分。

编码数据处理流程

编码格式

封装格式

存储音视频、图片或者字幕信息的一种容器

HTML 中的多媒体元素

在HTML中有<audio>和<video>两种标签来实现多媒体，它们的方法是一样的

• play()开始播放
• pause()暂停当前播放
• load()重新加载音视频元素
• canPlayType()检测浏览器能播放的类型
• addTextTrack()向音视频添加新的文本轨道

标签的属性

• autopaly设置是否在加载完成后立即播放
• controls设置是否显示控件（如播放、暂停等）
• currentTime设置或返回音频/视频中的当前播放位置(以秒计)
• duration返回当前音频/视频的长度(以秒计)
• src设置或返回音频/视频元素的当前来源
• volume设置或返回音频视频的音量
• buffered返回表示音频/视频已缓冲部分的TimeRanges对象
• playbackRate设置或返回音频/视频播放的速度。
• error返回表示音频/视频错误状态的MediaError对象
• readyState返回音频/视频当前的就绪状态。

标签的事件

• 1oadedmetadata当浏览器已加载音频/视频的元数据时触发
• canplay当浏览器可以开始播放音频/视频时触发
• play当音频/视频已开始或不再暂停时触发
• playing当音频/视频在因缓冲而暂停或停止后已就绪时触发
• pause当音频/视频已暂停时触发
• timeupdate当目前的播放位置已更改时触发
• seeking当用户开始移动/跳跃到音频/视频中的新位置时触发
• seeked当用户已移动/跳跃到音频/视频中的新位置时触发
• waiting当视频由于需要缓冲下一帧而停止时触发
• ended当目前的播放列表已结束时触发

标签的缺陷

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

• 视频资源的请求和加载无法通过代码控制，比如：

  • 分段加载
  • 清晰度无缝切换
  • 精确预加载

为了解决这些问题，就引入了以下技术

媒体源扩展API（Media Source Extensions）

特点：

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

MSE播放流程

流媒体传输协议

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

总结

如今多媒体在互联网上是不可或缺，十分重要的一个组成部分

掌握各式各样的多媒体相关技术是十分有必要的。多媒体在带给人们丰富多彩的上网体验的同时也带给了前端开发人员许多的机遇和挑战。