嘎嘎学习之Web多媒体 | 青训营笔记

闫池
107 阅读1分钟

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

1. Web多媒体的历史

image.png

2. 基础知识

2.1 编码格式

图像

image.png

视频

image.png

为什么要编码

一段完整的视频存在以下优化空间

  • 空间冗余
  • 时间冗余
  • 视觉冗余

便阿门数据处理流程

image.png

2.2 封装格式

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

image.png

常见的封装格式

image.png

2.3 多媒体元素和扩展API

video

image.png

audio

image.png

audio和video元素的方法

image.png

audio和video元素的属性

image.png

audio和video元素的事件

image.png

缺陷

  • 不支持直接播放hls，fly等视频格式

  • 视频资源的请求和加载无法通过代码控制

    • 分段加载（节约流量）
    • 清晰度无缝切换
    • 精确的预加载

> 媒体扩展API

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

image.png

> MSE

image.png

> 播放器的播放流程

image.png

2.4 流媒体协议

当下热门的流媒体协议

image.png

认识HLS

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

image.png

image.png

3. 应用场景

多媒体的应用场景可太多太多了，比如当下大火的各种直播平台、云游戏乃至于元宇宙都离不开多媒体的影子！

image.png

4. 总结和展望

多媒体的发展就是由flash到H5 video到MSE的

现在还会有许多新的技术标准在更新

  • web assembly
  • webcodecs
  • webgpu
  • webvr
  • webxr
  • 等等
avatar
文章
阅读
粉丝