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

53 阅读2分钟

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

基础知识

1.编码格式

图像基本概念

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

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

视频基本概念

  1. 分辨率:每一帧的图像分辨率
  2. 帧率:视频单位时间内包含的视频帧的数量
  3. 码率:就是指视频单位时间内传输的数据量,一般我们用kbps来表示,即千位每秒。

编码数据处理流程

  • 预测:去除空间冗余时间冗余
  • 变换:去除空间冗余
  • 量化:去除视觉冗余
  • 熵编码:去除编码冗余

2.封装格式

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

image.png

3.多媒体元素和扩展API

video元素

image.png

audio元素

image.png

video元素和audio元素 方法

image.png image.png

video元素和audio元素 属性

image.png

image.png

video元素和audio元素 事件

image.png image.png

video元素和audio元素 缺陷

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

媒体源扩展API(Media Source Extensions)

  • 无插件在web端播放流媒体
  • 支持播放hls、flv、mp4等格式视频
  • 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
  1. 创建 mediaSource 实例
  2. 创建指向 mediaSource 的URL
  3. 监听 sourceopen 事件
  4. 创建 sourceBuffer
  5. 向 sourceBuffer 中加入数据
  6. 监听 updateend 事件 image.png

播放器播放流程

数据加载 --> 解封装 --> 重封装 --> appendBuffer --> 解码渲染 --> 音视频同步

流媒体协议

image.png

HLS 全称是HTTP Live Streaming,是一个由 Apple 公司提出的基于HTTP的媒体流传输协议,用干实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。