这是我参与「第四届青训营 」笔记创作活动的第13天。
Web多媒体入门;
一：Web多媒体历史：
Flash 1994年开始2020
网页三剑客flash draemweaver fireworks播放插件
Flash下坡路ios不支持flash
Webp, ogg, mp4三种视频格式
Html5 2014年定稿
二：基础知识：
1. 编码格式：
a) 图像基本概念：
图像分辨率:用于确定组成一副图像的像素 数据，就是指在水平和垂直方向上图像所具有的像素个数。
图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。 例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个; 一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
b) 视频基本概念
分辨率:每一帧的图像分辨率
帧率:视频单位时间内包含的视频帧的数量
码率:就是指视频单位时间内传输的数据量，- 般我们用kbps来表示，即千位每秒。
c) |帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码。
P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码。
B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别。
d) 编码数据处理流程：
i. 预测：去除空间冗余、时间冗余
ii. 变换：去除空间冗余
iii. 量化：去除视觉冗余
iv. 熵编码：去除编码冗余
2. 封装格式：（存储音视频、图片或者字幕信息的一种容器）
a) 便于存储和运输
3. 多媒体元素和扩展API
a)vido元素：
<!DOCTYPE html>
<html>
<body>
<video src="./video . mp4" muted autoplay controls width=600 he ight=300></v ideo>
<video muted autoplay controls width=600 he ight=300>
<source src=" ./video . mp4"></ source>
</video>
</ body>
</html>
b)audio元素：
<!DOCTYPE html>
<html>
<body>
<audio src="./auido . mp3" muted autoplay controls width=600 he ight=300></audio>
<audio muted autoplay controls width=600 height= 300>
<source src=". / audio. mp3"></ source>
</ audio>
</ body>
</html>
c) 方法：
play()开始播放音频/视频
pause( )暂停当前播放的音频视频
load()重新加载音频视频元素
canPlayType()检测浏览器是否能播放指定的音频视频类型
addTextTrack()向音频视频添加新的文本轨道
d) 属性：
autoplay设置或返回是否在加载完成后随即播放音频视频
controls设置或返回音频视频是否显示控件(比如播放暂停等)
currentTime设置或返回音频视频中的当前播放位置(以秒计)
duration返回当前音频视频的长度(以秒计)
SrC设置或返回音频视频元素的当前来源
volume设置或返回音频视频的音量
buffered返回表示音频视频已缓冲部分的TimeRanges对象
playbackRate设置或返回音频视频播放的速度。
error返回表示音频视频错误状态的MediaError对象
readyState返回音频视频当前的就绪状态。
e) 缺陷：不支持直接播放hls、flv等视频格式
视频资源的请求和加载无法通过代码控制
4. 流媒体协议
a) HLS全称是HTTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。
三：应用场景
点播（直播）：视频上传，服务器转码
图片：编码的图片
游戏：生成不同的命令，延迟比较高
实时通讯、视频编辑
