Web多媒体入门|青训营笔记

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

Web多媒体历史

• Flash 1994年开始-2020
• 网页三剑客 flash draemweaver fireworks
• 播放插件
• Flash下坡路 ios不支持flash
• Webp，ogg，mp4三种视频格式
• HtrnI5 2014年定稿

基础知识

编码格式

图像基本概念

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

视频基本概念

• 分辨率:每一帧的图像分辨率
• 帧率:视频单位时间内包含的视频帧的数量
• 码率:就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒.
• I帧，P帧，B帧
  • I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码
  • P帧又称帧间预测编码帧，需要参考前面的i帧或者P帧才能进行编码
  • B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别
  • GOP：两个I帧之间的间隔

编码数据处理流程

封装格式

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

多媒体元素和扩展API

• <audio> 元素和<video>元素方法

方法	描述
play（）	开始播放音频/视频
pause（）	暂停当前播放的视频/音频
load（）	重新加载视频/音频
canPlayType（）	检查浏览器能否播放指定的音频/视频类型
addTextTrack（）	向音频/视频添加新的文本轨道

• <audio> 元素和<video>元素属性

• <audio> 元素和<video>元素事件

• <audio> 元素和<video>元素缺陷
  • 不支持直接播放hls,flv格式
  • 视频资源的请求和加载无法通过代码控制
    • 分段加载（节省流量）
    • 清晰度无缝切换
    • 精确预加载

媒体源扩展API

• 无插件在web端播放流媒体
• 支持播放hls、flv、MP4等格式视频
• 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
• 步骤：

  • 创建mediaSource实例

  • 创建指向mediaSource的URL

  • 监听sourceopen事件-动创建sourceBuffer

  • 向sourceBuffer中加入数据

  • 监听updateend事件

• MSE播放流程