【青训营】- 走进Web 多媒体技术一、本堂课重点内容：什么是Web多媒体技术音视频基础知识浏览器提供的原生多媒体

Web多媒体技术主要包括6个方向，即：

（1）视频大小的计算假设8bit表示一个子像素，清晰度1280 * 720，帧率25fps，时长60s，则

$未压缩视频大小=8bit* 3* 1280 * 720* 25* 60=3.9GB$

其中：

因此可以看出，一个常见的60s的视频大小能达到将近4个G，所以会使用压缩算法对图像进行压缩。如使用H264算法压缩后，上述视频的大小可以被压缩到11M

（2）常见容器封装格式

（1）<video>和<audio>标签

<video>标签专门用来播放网络上的视频或电影，<audio>标签则专门用来播放网络上的音频数据。使用这两个标签，就不再需要使用其他的任何插件了，只要使用支持 HTML5 的浏览器就可。

（2）<video>和<audio>的属性及其介绍

（3）<video>和<audio>的事件及其介绍

（4）使用时需要的注意点

<audio  src="">您的浏览器不支持audio标签！</audio>**
<video  src="">您的浏览器不支持video标签！</video>**

主要支持的格式
- video标签：MP4、WebM、Ogg
- audio标签：MP3、Wav、Ogg
指定播放源
- 使用标签中的src属性指定URL或者文件路径，作为播放源
- 使用<source>标签来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，浏览器的选择顺序为代码中的书写顺序，它会从上往下判断自己对该播放格式是否支持，直到选择到自己支持的播放格式为止。其使用方法如下：

<video >
    <source  src="xxxx" type="video/ogg; codecs='theora,vorbis"/>
    <source  src="xxxx" type="video/quicktime"/>
</video>

（5）MediaSource：为了解决<audio>标签不支持hls、flv等视频格式，以及视频资源的请求和加载无法通过代码控制等问题，常使用MediaSource解决。

MediaSource的优点：

加密音视频播放：主要是EME、CDM内容解密模块，想了解详细信息可以查看这篇博客精读加密媒体扩展（Encrypted Media Extensions，EME)
自适应码率（ABR）：根据网络情况自动调整视频的分辨率
弹幕
- 无碰撞：不同字体的文字不会发生碰撞和重叠，能够保证每一条弹幕都能清楚地展示
- 交互弹幕：比如当鼠标悬停在某条弹幕上，用户可以对这条弹幕进行点赞、或是举报等操作
- 放挡人像：当弹幕过多的时候，使用图像识别算法和CSS的mask属性实现
软解：实现Web端播放H.265格式和国产浏览器防劫持一般的，<video>支持H.264，但是不支持H.265。因此可以使用软件播放技术，即webassembly解码、webgl画面渲染和AudioContext解码、播放音频使之支持。而且，一般国产浏览器会对<video>标签进行劫持，在播放的视频上增加一些浏览器提供商附加的功能甚至是广告等，使用软件播放技术就能解决这个问题。

W3C音视频技术新标准: WebCodecs、WebGPU、WebVR、WebXR

这次课程感觉收获较多，因为自己还是在校的学生，几乎不涉及到音视频处理等问题，即使之前有了解过了，但是忘得差不多了，这次课程对于我来时不仅学到了新的知识，也是对之前不熟悉知识的巩固。

【青训营】- 走进Web 多媒体技术