Web 多媒体入门

这是我参与「第四届青训营 」笔记创作活动的的第16天。本节课的主题是【Web 多媒体入门】，授课老师为刘立国。

本篇笔记分别对课程中所讲的几个要点进行一些解读，如若有误，欢迎大家在评论区交流，指出不当之处。

Web多媒体历史

• iphone不支持Flash→Flash的衰落
• H5→radio标，能用格式有限
• 基于新API（MSE），实现多格式播放

基础知识

01.编码格式

图像基本概念

• 图像分辨率
• 图像深度（存储一个像素占用的位数）

为什么要编码？

不编码，存在大量的冗余，使文件体积巨大。

编码数据处理流程：

预测→ 变换→ 量化→ 编码

🔽 🔽 🔽 🔽

去除时间 去除空间 去除视觉 去除编码

空间冗余 冗余 冗余 冗余

02.封装格式

存储音视频、图片或者字幕信息的一种容器

03.多媒体元素与拓展API

• <video>

• <audio>

  • API:play() pause() load() canPlayType() addTextTrack()

  缺陷：不能直接播放hls flv等视频格式，视频资源请求和加载无法通过代码控制

• MSE（Media Source Extensions）：大部分浏览器已支持

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

播放器播放流程

04.流媒体协议

HLS：HTTP Live Streaming, 由Apple提出的基于HTTP的媒体流传输协议，用于实时音视频流传输。目前广泛用于点播 直播领域。

应用场景

• 点播（防挡弹幕）
• 视频编辑
• 直播
• 实时通信
• 图片
• 云游戏

总结与展望

新技术标准

• Webassembly
• WebCodecs
• WebGPU
• WebVR WebXR