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

段昕怡
97 阅读5分钟

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

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

1、Web基础知识

编码格式

图像基本概念

图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。如1920*1080（水平方向1920个像素、垂直方向1080个像素）

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

视频的基本概念

分辨率：每一帧图像的分辨率（所有帧分辨率相同）

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

码率：指视频单位时间内传输的数据量，一般用kbps标签，即千位每秒

视频帧的分类

  • I帧： I帧对视频压缩编码无需依赖其他的帧，只要有I帧自己的数据就能完全解码。
  • P帧（前项预测编码帧）： 其解码要依赖前一帧，前一帧没解码自身也无法解码。
  • B帧： 其解码不仅要依赖前一帧，还要根据其后面的帧内容。

I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码

P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码

B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别

image.png

压缩内容

空间冗余：同色区域像素重复。同一景物表面上采样点的颜色之间通常存在着空间相关性，相邻各点的取值往往相近或者相同，这就是空间冗余。

时间重复：在视频、动画图像中，相邻帧之间往往存在着时间和空间的相关性。其中的相邻帧在对应位置的像素之间，亮度和色度信息存在着极强的相关性。

编码冗余：颜色存储时候，颜色不太多。人们用于表达某一信息所需要的比特数总比理论上表示该信息所需要的最少比特数要大，它们之间的差距就是信息熵冗余，或称编码冗余。

视觉冗余：人类眼睛对颜色不太敏感，将看不到的颜色屏蔽。人眼不能感知或不敏感的那部分图像信息。

编码数据处理流程

image.png

2、多媒体元素和扩展API

video和audio元素

在h5中，通过可以通过video标签和audio标签分别播放视频和音频。两种标签用法一样。

<video src="./video.mp4" muted autoplay width=600 height=300 control>
</video>

<video muted autoplay width=600 height=300 control>
    <source src="./video.mp4">
    </source>
    <source src="./video1.mp4">
    </source>   
</video>

元素方法

  • play：开始播放音频/视频
  • pause：暂停当前播放的音频/视频
  • load：重新加载音频/视频元素
  • canPlayType：检测浏览器是否能播放指定的音频/视频类型
  • addTextTrack：向音频/视频添加新的文本轨道
  • play方法是异步的，立刻暂停，即立刻调用pause方法会报错

元素属性

  • autoplay：设置或返回是否在加载完成后随即播放
  • control：设置或返回是否显示控件
  • currentTime：设置或返回视频/视频中的当前播放位置(以秒计)
  • duration：返回当前视频/音频的长度
  • src：设置或返回视频/音频的来源
  • volume：设置或返回视频/音频的音量TimeRanges对象
  • buffered：返回表示视频/音频已缓存部分的
  • playbackRate：设置或返回视频/音频的播放速度
  • error：返回表示错误状态的MediaError对象
  • readyState：返回当前的就绪状态

元素事件

  • loadedmetadata：浏览器开始加载视频/音频时触发
  • canplay：浏览器可以开始播放视频/音频时触发
  • play：视频/音频暂停时触发
  • playing：在视频/音频在因缓冲而暂停或停止后已就绪时触发
  • pause：视频/音频暂停时触发
  • timeupdate：用于播放位置改变时触发
  • seeking：用于开始跳跃到视频/音频中的新位置时触发
  • seeked：用于已跳跃到视频/音频中的新位置时触发
  • waiting：视频由于缓冲下一帧而停止时触发
  • ended：播放列表已结束时触发

video和audio标签的缺陷

1.不支持直接播放hls、flv等格式视频 2.视频资源的请求和加载无法通过代码控制 3.分段加载（节约流量） 4.清晰度无缝切换（增强用户体验） 5.精确预加载（增强用户体验）

媒体源扩展MSE(Media Source Extensions)

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

流媒体协议

image.png

3、应用场景

Web多媒体：视频编辑、点播、直播、图片、云游戏、实时通信

avatar
文章
阅读
粉丝