Web多媒体入门 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第12天 Web多媒体历史 Flash：19

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

Web多媒体历史

Flash：1994-2020
- 网页三剑客，flash draemweaver fireworks 播放插件
- 音视频依赖于flash插件
- Flash 走下坡路，ios不支持flash
Html5：2014年定稿，原生支持音视频，但功能也有限（视频格式有限制，状态检测不到）
Media Source Extensions：扩展API实现Html5的不足之处

基础知识

编码格式

图像基本概念

图像分辨率：

用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。

图像深度：

图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如：彩色图像每个像素用R,G,B三个分量表示，每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，即16777216个；一副单色图像存储每个像素需要8bit,则图像的像素深度为8位，最大灰度数目为2的8次方，即256个。

视频基本概念

分辨率：

每一帧的图像分辨率。

帧率：

视频单位时间内包含的视频帧的数量。

码率：

就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。

I帧为关键参考帧，P帧解码依赖于前面的I帧，B帧解码不仅依赖于前面的P帧,还依赖于后面的P帧

GOP (group of picture)

两个帧之间的间隔

为什么要编码？

为了视频的存储和传输。

空间冗余

相同颜色用变量存储像素值，重复一万次，减少存储空间。

时间冗余

图片大体上没有太大变化，99%的相同的图像内容存储时属于时间冗余，没必要再存一遍

编码冗余

视觉冗余

去除视觉上看不到的颜色。一万个像素和十万个像素去表现一个足球没有太大区别、

编码数据处理流程

预测：分为帧内预测和帧间预测，I帧属于帧内预测，主要去除空间冗余，帧间预测，主要去除时间冗余，

封装格式

封装格式：存储音视频、图片或字幕信息的一种容器。(类似于月饼盒)

HTML5播放视频主要依赖<audio>和<video>

多媒体元素和扩展API

<video>元素

两种方式无显著区别，用<source>的话<video>标签中可以嵌套多个<source>，第一个<source>标签写mp4格式，第二个<source>标签写obj格式，这样播放视频时就会从第一个<source>开始尝试，如果第一个支持就去取第一个，否则取第二个，相当于兜底的作用。

<!DOCTYPE html>
<html>
<body>
    <video src="./video.mp4" muted autoplay controls width="600" height="300"></video>

    <video muted autoplay controls width="600" height="300">
    <source src="./video.mp4"></source>
    </video>
    
</body>
</html>

<audio>元素

<!DOCTYPE html>
<html>
<body>
    <audio src="./audio.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>