Web多媒体入门 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第8天基础知识编码格式图像基本概念图

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

基础知识

编码格式

图像基本概念

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

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

视频基本概念

分辨率：每一帧的图像分辨率

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

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

编码数据处理流程

预测（去除空间冗余时间冗余）->变换（去除空间冗余）->量化（去除视觉冗余）->熵编码（去除编码冗余）

封装格式

封装格式：存储音视频，图片或者字幕信息的一种容器

多媒体元素和扩展API

元素

    <!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>

媒体源扩展API(Media Source Extensions)

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

应用场景

点播
视频编辑
实时通信
云游戏
图片
直播

总结

flash->H5 video->MSE
编码格式，封装格式，多媒体元素，流媒体协议
应用场景