Web多媒体 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第14天
转眼间青训营马上就要结束了，确实在这一个月里学到了很多，虽然青训营结束了，但是学习是不会结束的。以后也会再接再厉的，接下来就开始今天的学习吧。
Web多媒体历史
大致分为三部分：
1、1994-2020但ios不支持flash
2、HTML
3、Media Source Extensions
基础知识
编码格式
图像基本概念
图像分辨率：用于确定组成一幅图像的像素数据，定义了图像再水平和垂直方向所具有的像素个数。
图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用 R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个，一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
视频基本概念
分辨率：每一帧图像的分辨率。
帧率：视频单位时间内包含的视频帧的数量。
码率：视频单位时间内传输的数据量，一般用kbps来表示。即千位每秒。
I帧、P帧、B帧
- I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
- P帧又称帧间预测编码帧，需要参考前面的I帧或P帧才能进行编码
- B帧又称双向预测编码帧，也就是B帧纪录的是本帧与前后帧的差别
（I帧 P帧 P帧 P帧 P帧 P帧）
GOP
两个I帧之间的间隔
1-7的间隔就是GOP
编码数据处理流程
graph TD
预测--> 变换 --> 量化 -->熵编码
封装格式
封装格式：存储音视频、图片或者字幕信息的一种容器
| 封装格式 | |
|---|---|
| 视频封装格式 | 视频文件格式 |
| Audio Video Interleave | AVI |
| Windows Media Video | WMV |
| Moving Picture Experts Group 分为MPEG-1 MPEG-2 MPEG-4 | MPG MPEG VOB MP4 |
| Matroska | MKV |
| Real | RM RMVB |
| QuickTime File Format | MOV |
| Flash Video | FLV |
多媒体元素和扩展API
<video> 元素
<video src="./v.mp4" muted autoplay controls width=600 height=300></video>
<video muted autoplay controls width=600 height=300>
<source src="./v.mp4"></source>
</video>
<audio> 元素
<audio src="./a.mp3" muted autoplay controls width=600 height=300></audio>
<audio muted autoplay controls width=600 height=300>
<source src="./a.mp3"></source>
</audio>
<video>和<audio>元素 方法
两者方法一样
| 方法 | 描述 |
|---|---|
play() | 开始播放音/视频 |
pause() | 暂停当前播放音/视频 |
load() | 重新加载音/视频元素 |
canPlayType() | 检测浏览器能播放指定的音/视频类型 |
addTextTrack() | 向音/视频添加新的文本轨道 |
const myVideo = document.getElementById("vs");//vs为video的id
function playVid(){
myVideo.play();//开始播放视频
}
function playVid(){
myVideo.pause();//暂停播放视频
}
function playVid(){
myVideo.loade();//重新加载视频
}
<video>和<audio>元素 属性
| 属性 | 描述 |
|---|---|
| src | 设置或返回音/视频的当前来源 |
| autoplay | 设置或返回是否在加载完成后随即播放音/视频 |
| controls | 设置或返回音/视频是否显示控件 |
| currenTime | 设置或返回音/视频中的当前播放位置 |
| duration | 返回当前音/视频的长度 |
<video>和<audio>元素 事件
| 事件 | 描述 |
|---|---|
| loadedmetadata | 当浏览器已加载音/视频的元数据时触发 |
| canplay | 当浏览器可以开始播放音/视频时触发 |
| play | 当音/视频已开始或不再暂停时触发 |
| playing | 当音/视频在因缓冲而暂停或停止后已就绪时触发 |
| pause | 当音/视频已暂停时触发 |
| timeupdate | 当目前的播放位置已更改时触发 |
<video>和<audio>元素 缺陷
不支持直接播放hls、flv等视频格式
视频资源的请求和加载无法通过代码控制
- 分段加载
- 清晰度无缝切换
- 精确预加载
媒体源扩展API
- 无插件在web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确加载等
1、创建mediaSource实例
2、创建指向mediaSource的URL
3、监听sourceopen事件
4、创建sourceBuffer
5、向sourceBuffer中加入数据
6、监听updateend事件
播放器播放流程
流媒体协议
| 协议名称 | 传输协议 | 封装格式 | HTML5 |
|---|---|---|---|
| HLS | HTTP | M3U8/TS | 支持 |
| HTTP-FLV | HTTP | FLV | 支持 |
| Dash | HTTP | FMP4 | 支持 |
| RTMP | TCP | FLV | 不支持 |
HLS全称是HTTP Live Streaming, 是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。
应用场景
总结
随着这几年短视频的APP发展迅速，走进千家万户，丰富了我们的日常生活，所以学习和了解Web多媒体音视频技术也是十分重要的。
学到这我想大家也对Web的多媒体有了初步的认识了吧，不如现在就开始尝试练习一下吧
如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）
作者：Yifan
日期：2022年7月24日
电子邮箱：1279640748@qq.com
