图像基本概念
图像分辨率：用于确定组成一幅图像的像素数据，定义了图像再水平和垂直方向所具有的像素个数。
图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用 R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个，一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
视频概念
分辨率：每一帧图像的分辨率。
帧率：视频单位时间内包含的视频帧的数量。
码率：视频单位时间内传输的数据量，一般用kbps来表示。
I帧、P帧、B帧
- I帧表示关键帧解码时只需要本帧数据就可以完成
- P帧码时需要用之前缓存的画面叠加上本帧定义的差别，生成最终画面。
- B帧是双向差别帧，也就是B帧记录的是本帧与前后帧的差别
封装格式
存储音视频、图片或者字幕信息的一种容器
web 多媒体历史
- falsh
- HTML5
- Media Source Extensions
多媒体元素和扩展API
<DOCTYPE html> <html> <body> <video src="./video.mp4" muted autoplay controls width=600 height=300></video> <video muted autoplay controls width=600 height=300> <source src="./video.mp4"></source> </video> </body> </html> 复制代码
元素方法
- play：开始播放音频/视频
- pause：暂停当前播放的音频/视频
- load：重新加载音频/视频元素
- canPlayType：检测浏览器是否能播放指定的音频/视频类型
- addTextTrack：向音频/视频添加新的文本轨道
- play方法是异步的，立刻暂停，即立刻调用pause方法会报错
元素属性
- autoplay：设置或返回是否在加载完成后随即播放
- control：设置或返回是否显示控件
- currentTime：设置或返回视频/视频中的当前播放位置(以秒计)
- duration：返回当前视频/音频的长度
- src：设置或返回视频/音频的来源
- volume：设置或返回视频/音频的音量TimeRanges对象
- buffered：返回表示视频/音频已缓存部分的
- playbackRate：设置或返回视频/音频的播放速度
- error：返回表示错误状态的MediaError对象
- readyState：返回当前的就绪状态
元素事件
- loadedmetadata：浏览器开始加载视频/音频时触发
- canplay：浏览器可以开始播放视频/音频时触发
- play：视频/音频暂停时触发
- playing：在视频/音频在因缓冲而暂停或停止后已就绪时触发
- pause：视频/音频暂停时触发
- timeupdate：用于播放位置改变时触发
- seeking：用于开始跳跃到视频/音频中的新位置时触发
- seeked：用于已跳跃到视频/音频中的新位置时触发
- waiting：视频由于缓冲下一帧而停止时触发
- ended：播放列表已结束时触发
video和audio标签的缺陷
1.不支持直接播放hls、flv等格式视频
2.视频资源的请求和加载无法通过代码控制
3.分段加载（节约流量）
4.清晰度无缝切换（增强用户体验）
5.精确预加载（增强用户体验）
媒体源扩展MSE(Media Source Extensions)
- 无插件在Web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
