这是我参与「第四届青训营」笔记创作活动的的第2天，是我青训营发表的第二篇笔记。
这篇是关于 Web多媒体 方面的内容。
编码格式
图像
-
图像分辨率
图像分辨率：用于确定组成一副图像的像素数据，就是指的是在水平和垂直方向上图像所具有的像素个数
-
图像深度
图像深度：是指存储每个像素所需要的比特数。图像深度决定了图像每个像素可能的颜色数，或者可能的灰度级数。
例如：彩色图像每个图象用RGB三个分量来表示，每个分量用8位，那么 像素深度 就是24位，可以表示的颜色数目就是2^24次方。
视频
-
分辨率
每一帧的图像分辨率
-
帧率
视频单位时间内包含的视频帧的数量
-
码率
是指视频单位时间内传输的数据量，一般用kbps，即千位每秒
时间维度上一系列连续的图片就是视频
- I帧 P帧 B帧 GOP
I帧又称为内编码帧，是一种自带全部信息的独立帧，无需参考其他图像就能够独立进行解码
P帧又称间预测编码帧，需要参考前面的I帧或者P帧才能够进行编码
B帧又称为双向预测编码帧，就是B帧记录的是本帧与前后帧的差别，需要先解码前后帧才能够解码本帧
GOP(group of picture)：是两个I帧之间的间隔
为什么要进行编码的原因
举个例子：
拿一张1920×1080的照片，那么这张照片的大小就是1920×1080×24/8=622800Byte(5.9MB)，以视频30FPS，那么一分钟就是30×60×5.9MB=10520MB(10.37GB) ，那么时长60分钟的视频大小就是10.37GB×60=622.2GB， 就会占据很大的一块存储空间，甚至大过手机或者电脑的存储空间
-
空间冗余
-
时间冗余
当第N帧和第N+1帧差不并不是太大时，同时对于视频没有太大影响时，高帧率就会造成一定程度的浪费
-
编码冗余
-
视觉冗余
因为人的眼睛分辨不出极高和极低分辨率的情况，所以当降低分辨率时也是能够达到同样的效果
编码数据的流程
多媒体元素 (video audio)
video和audio的两种写法，第二种写法可以写多个 source 标签，以便能够找到有效的链接进行正常的播放
<video src="./video.mp4" muted autoplay controls width=600 height=300></video>
<video muted autoplay controls width=600 height=300>
<source src="./video.mp4"/>
</video>
<audio src="./audio.mp3" muted autoplay controls width=600 height=300></audio>
<audio muted autoplay controls width=600 height=300>
<source src="./audio.mp3"/>
</audio>
<video> 和 <audio> 元素的方法
| 方法 | 说明 |
|---|---|
| play() | 开始播放音频/视频 |
| pause() | 暂停当前播放的音频/视频 |
| load() | 重新加载音频/视频 |
| canPlayType() | 检测浏览器是否能够播放指定的音频/视频类型 |
| addTextTrack() | 向音频/视频添加新的文本轨道 |
<video> 和 <audio> 元素的属性
| 属性 | 说明 |
|---|---|
| autoplay | 设置或者返回是否在加载完成后随机播放音频/视频 |
| controls | 设置或者返回音频/视频是否显示控件（播放、暂停等） |
| currentTime | 设置或者返回音频/视频中的当前播放位置（以 秒 记） |
| duration | 返回当前音频/视频的长度（以 秒 记） |
| src | 设置或者返回音频/视频元素的当前来源 |
| volume | 设置或者返回音频/视频的音量 |
| buffered | 返回表示音频/视频已缓冲部分的TimeRanges对象 |
| playbackRate | 设置或者返回音频/视频播放的速度 |
| error | 返回表示音频/视频错误状态的MediaError对象 |
| readyState | 返回音频/视频当前的就绪状态 |
| …… | …… |
<video> 和 <audio> 元素的事件
| 事件 | 说明 |
|---|---|
| loadedmetadata | 当浏览器已加载音频/视频元数据时触发 |
| canplay | 当浏览器可以开始播放音频/视频时触发 |
| play | 当音频/视频已开始或者不再暂停时触发 |
| playing | 当音频/视频在因缓冲而暂停或者停止后已就绪时触发 |
| pause | 当音频/视频已暂停时触发 |
| timeupdate | 当目前的播放位置已更改时触发 |
| seeking | 当用户开始移动/跳跃到音频/视频中的新位置时触发 |
| seeked | 当用户已移动/跳跃到音频/视频的新位置时触发 |
| waiting | 当视频由于需要缓冲下一帧而停止时触发 |
| ended | 当目前的播放列表已结束时触发 |
| …… | …… |
媒体源扩展API(Media Source Extension)
流媒体
HLS是HTTP Live Streaming，是由Apple提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输
结束
通过web多媒体的学习，对 video 和 audio 的了解更加的深入，对于使用这两个元素有了更好的理解
