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

猴子超多肉
117 阅读5分钟

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

Web多媒体历史

image.png

基础知识

编码格式

图像基本概念

  • 图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。如1920*1080（水平方向1920个像素、垂直方向1080个像素）
  • 图像深度︰图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如, 彩色图像每个像素用R,G,B三个分量表示,每个分量用8位,像素深度为24位可以表示的颜色数目为2的24次方，既16777216个﹔一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。（图片的分辨率越大不一定所占据的存储空间越大，还要根据其图片深度占用位数。

视频的基本概念

  • 分辨率：每一帧图像的分辨率（所有帧分辨率相同）
  • 帧率：视频单位时间内包含的视频帧的数量
  • 码率：指视频单位时间内传输的数据量，一般用kbps标签，即千位每秒

视频帧的分类

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

为什么要编码

  • 假设存在一个图片，分辨率是1920*1080，则其未压缩的占用空间为：1920108024/8=6220800Byte，大约5.9M；若帧率为30FPS，时长 90分钟，则占用空间为大小 933G，这样的存储空间是不能接受的。因此编码的意义是为了压缩视频视频大小，为了更好的进行视频传输和节约存储空间。
  • 视频是有很多冗余的，包括空间冗余、时间冗余、编码冗余、视觉冗余等。

编码数据处理流程

image.png

封装格式

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

多媒体元素和扩展API

<video>元素

image.png

<audio>元素

image.png

<video>和<audio>元素方法

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

元素属性

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

元素事件

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

video和audio标签的缺陷

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

媒体源扩展API(Media Source Extensions)

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

MSE播放流程

image.png

播放器的播放流程

image.png

mp4和fmp4

fmp4文件结构相比普通的MP4文件多了多个moof和moot文件，因此对流式播放支持得更加友好 image.png

流媒体协议

image.png

  • HLS全称是HTTP Live Streaming，是一个由Apple公司提出的基于HTTP的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。在IOS段，只要把M3U8的地址直接赋给video标签的src，就可以直接播放。

应用场景

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

总结与展望

总结

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

新技术标准：

  • Webassembly
  • WebCodecs
  • WebGPU
  • WebVR、WebXR
avatar
文章
阅读
粉丝