这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战
什么是web多媒体技术
web前端：
交互体验、前端工程化、跨段能力
数字多媒体：
音视频原理、封装容器、编解码算法
根据w3school的定义，多媒体是我们可以看到和听到的一切：文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等等。
多媒体以多种方式存在。在因特网上，您会发现很多被嵌入网页中的元素，并且今天的 web 浏览器已支持多种多媒体格式。
音视频基础知识
以我们平常看的视频为例计算视频大小，假设一个清晰度1280 * 720，帧率 25fps，时长 60s，若是rgb计算，8bit表示一个子像素。
那么这个视频的原始大小为：
8bit * 3 * 1280 * 720 * 25 * 60 = 3.9GB
一般我们看到的都是经过压缩后的视频，比如该视频经过 H264 压缩后视频大小为11MB，压缩比360 : 1
视频压缩
视频原始文件中存在大量数据冗余信息，可以使用视频压缩算法减少信息冗余，这里举了两个简单的例子：
时间冗余：视频相邻的两帧之间内容相似，存在运动关系
空间冗余：视频的某一帧内部的相邻像素存在相似性
编码格式也在不断发展，H.264的压缩比是MPEG-2的2倍以上，是MPEG- 4的1.5～2倍。H.265比H.264再提高50%。
容器封装格式
浏览器提供的原生多媒体能力
<video>/<audio>元素
HTML5 DOM 为<video>/<audio>元素提供了方法、属性和事件。具体的属性和方法可以参考这篇菜鸟文档
此处节选油管上视频为例，主流视频网站也大多使用<video>元素，不过这里是通过xhr分片请求的数据。
<video>/<audio>元素的缺陷
-
不支持直接播放hls、flv等视频格式
-
视频资源的请求和加载无法通过代码控制
分段加载（节约流量） 清晰度无缝切换 精确预加载
MediaSouce
MediaSouce具有以下特点：
- 扩展浏览器视频播放能力，支持视频分段加载（直接传入fmp4分片），替代Flash播放器
- 支持播放mp4（实现流式播放）、hls、flv等
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
以下代码是关于MediaSouce的demo简单演示，详细信息可以参考MediaSource。
MP4与fMP4的区别
MP4是树状结构，有3个顶层box：
- ftyp：File Type Box，描述文件遵从的MP4规范与版本；
- moov：Movie Box，媒体的metadata信息，有且仅有一个。
- mdat：Media Data Box，存放实际的媒体数据，一般有多个；
FMP4 跟普通 mp4 基本文件结构是一样的。普通mp4用于点播场景，fmp4通常用于直播场景。FMP4中，媒体数据的metadata在moof box中，moof 跟 mdat （通常）结对出现。moof 中包含了sample duration、sample size等信息，因此，fMP4可以边生成边播放；如图为fmp4的目录结构。具体可以参考这篇文章。
web多媒体技术的发展和突破
加密音视频
自适应码率ABR
实时监控播放器缓存和网速，动态调整码率
弹幕
刚好前几天看到这个文章，讲得很清楚：浅谈弹幕的设计
- 无碰撞：每个轨道不同速度的弹幕不会发生碰撞
- 交互弹幕：观众可以和弹幕进行交互动作，比如点赞、举报
- 防挡人像：蒙版弹幕技术，检测人像，使用
mask-image对dom进行处理
展望
最后提到了云游戏以及字节web多媒体技术发展。还有一个W3C音视频技术新标准，也就是
- WebCodecs
- WebGPU
- WebVR、WebXR
每一个细节都可以深入研究，真是学海无涯苦作舟~
