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

本堂课重点内容

本节课主要给大家介绍下什么是web多媒体，涉及到一些比较重要的概念和前端常用的多媒体web API，让大家对多媒体相关知识点有一个初步的了解和认识。

详细知识点介绍

概念

多媒体是我们可以看到和听到的一切：文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等等。

多媒体以多种方式存在。在因特网上，有很多被嵌入网页中的元素，并且今天的 web 浏览器已支持多种多媒体格式。

历史

Flash 1994年开始-2020

网页三剑客flash draemweaver fireworks播放插件

Flash下坡路ios不支持flash

Webp,ogg,mp4三种视频格式

Html5 2014年定稿
Media SourceExtensions

媒体源扩展(Media Source Extensions，缩写MSE)是一项W3C规范，它允许JavaScript为<audio>和<video>动态构造媒体源，实现了JS直接控制视频流

2016年11月17日，W3C的HTML媒体扩展工作组(HTML Media Extensions Working Group）发布了媒体源扩展(Media Source ExtensionsTM)的正式推荐标准。该规范允许通过JavaScript为<audio>和<video>动态构造媒体源，它定义了MediaSource对象，作为HTML 5中HTMLMediaElement的媒体数据源。MediaSource对象可以有一个或多个SourceBuffer对象。应用程序可以向SourceBuffer 对象动态添加数据片段，并可以根据系统性能及其他因素自适应调整所添加媒体数据的数据质量。来自SourceBuffer 对象的数据可以解码为音频、视频或文本数据，并由浏览器或播放器处理。

MSE

<audio>和<video>元素缺陷

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

流程

通过Range请求拉取数据。
通过MediaSource处理数据。
将数据流交给/标签进行播放。

作用

动态清晰度切换、视频拼接（例如视频插入广告音频语言切换、动态控制视频加载等等

Web多媒体基础知识

编码格式

图像基本概念

图像分辨率:用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数。
图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数,或可能的灰度级数。例如,彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个;一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。