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

Web 多媒体入门

1.Web多媒体历史

Flash
Html5
Media Source Extensions

Flash 1994年开始-2020 网页三剑客flash draemweaver fireworks播放插件

Flash下坡路ios不支持flash

Webp, ogg,mp4三种视频格式

Html5 2014年定稿

2.基础知识

编码格式

图像基本概念

图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。如1920*1080（水平方向1920个像素、垂直方向1080个像素）

图像深度︰图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如, 彩色图像每个像素用R,G,B三个分量表示,每个分量用8位,像素深度为24位可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。（图片的分辨率越大不一定所占据的存储空间越大，还要根据其图片深度占用位数。）

视频基本概念

分辨率:每一帧的图像分辨率
帧率: 视频单位时间内包含的视频帧的数量
码率:就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。

I帧、P帧、B帧

I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
P帧又称帧间预测编码帧，需要参考前面的l帧或者P帧才能进行编码
B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别

image (1).png

GOP (group of picture)

两个I帧之间的间隔

image (2).png

为什么要编码

假设存在一个图片，分辨率是1920x1080，则其未压缩的占用空间为：1920x1080x24/8=6220800Byte，大约5.9M；若帧率为30FPS，时长 90分钟，则占用空间为大小 933G，这样的存储空间是不能接受的。因此编码的意义是为了压缩视频视频大小，为了更好的进行视频传输和节约存储空间。视频是有很多冗余的，包括空间冗余、时间冗余、编码冗余、视觉冗余等。

编码数据处理流程

在这里插入图片描述

image (3).png

封装格式

视频封装格式	视频文件格式
AVI(Audio video lnterleave)	AVI
WWMV(Windows Media video)	WMV
MPEG(Moving Picture Experts Group) 分为 MPEG-1. MPEG-2. MPEG-4	MPG MPEG VOB DAT 3GP MP4
Matroska	MKV
Real video	RM RMVB
QuickTime File Format	MOV
Flash video	FLV
...	...

多媒体元素和扩展API

video元素

<!DOCTYPE html>
<html>
<body>
    <audio src="./auido.mp3" muted autoplay controls width=600 height=300></audio>
    <audio muted autoplay controls width=600 height=300>
        <source src=" . / audio.mp3"></source>
    </audio>
</body>
</html>

audio元素

<!DOCTYPE html>
<html>
<body>
    <audio src="./auido.mp3" muted autoplay controls width=600 height=300></audio>
    <audio muted autoplay controls width=600 height=300>
        <source src=" . / audio.mp3"></ source>
    </ audio>
</body>
</html>

元素方法

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

元素属性

autoplay：设置或返回是否在加载完成后随即播放
control：设置或返回是否显示控件
currentTime：设置或返回视频/视频中的当前播放位置(以秒计)
duration：返回当前视频/音频的长度
src：设置或返回视频/音频的来源
volume：设置或返回视频/音频的音量TimeRanges对象
buffered：返回表示视频/音频已缓存部分的
playbackRate：设置或返回视频/音频的播放速度
error：返回表示错误状态的MediaError对象
readyState：返回当前的就绪状态

元素事件

loadedmetadata：浏览器开始加载视频/音频时触发
canplay：浏览器可以开始播放视频/音频时触发
play：视频/音频暂停时触发
playing：在视频/音频在因缓冲而暂停或停止后已就绪时触发
pause：视频/音频暂停时触发
timeupdate：用于播放位置改变时触发
seeking：用于开始跳跃到视频/音频中的新位置时触发
seeked：用于已跳跃到视频/音频中的新位置时触发
waiting：视频由于缓冲下一帧而停止时触发
ended：播放列表已结束时触发

audio和video元素缺陷

不支持直接播放hls、flv等视频格式
视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量)
- 清晰度无缝切换
- 精确预加载

媒体源扩展API (Media Source Extensions)

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

创建mediaSource实例
创建指向mediaSource的URL监听sourceopen事件
创建sourceBuffer
向sourceBuffer中加入数据
监听updateend事件

MSE播放流程

image (4).png

数据加载
解封装
重封装
appendBuffer
解码渲染
音视频同步

流媒体协议

协议名称	传输协议	封装格式	HTML5
HLS	HTTP	M3U8/TS	支持
HTTP-FLV	HTTP	FLV	支持
Dash	HTTP	FMP4	支持
RTMP	HTTP	FLV	不支持

HLS全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。在IOS段，只要把M3U8的地址直接赋给video标签的src，就可以直接播放。

3.应用场景

image (5).png

4.总结与展望

总结
- flash → H5 video → MSE
- 编码格式、封装格式、多媒体元素、流媒体协议
- 应用场景
新技术标准
- Webassembly
- WebCodecs
- webGPU
- WebVR.WebXR

Web 多媒体入门 | 青训营笔记