Web多媒体 ｜ 青训营笔记

Web多媒体 ｜ 青训营笔记

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

多媒体（Multimedia）指图片、声音、音乐、动画和视频。

现代的 web 浏览器支持多种多媒体格式。

什么是多媒体？

多媒体是我们可以看到和听到的一切：文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等等。

多媒体以多种方式存在。在因特网上，我们会发现很多被嵌入网页中的元素，并且今天的 Web 浏览器已支持多种多媒体格式。比如：

• 点播
• 直播
• 图片
• 实时通信
• 云游戏
• 视频编辑

浏览器支持

第一批因特网浏览器仅支持文本，甚至被限制为单一颜色的单一字体。

随后的 Web 浏览器支持色彩、字体以及文本样式，并增加了对图像的支持。

不同的浏览器对声音、动画以及视频的处理方式是各不相同的。某些元素被内联处理，某些要求插件，而某些则要求 ActiveX 控件。

多媒体格式

多媒体元素（比如声音或视频）被存储在媒体文件中。

识别媒介类型的最通用的方法是查看文件的扩展名。

当浏览器获知文件的后缀是 .htm 或者 .html，它将假定文件是 HTML 页面。.xml 后缀表示 XML 文件，而 .CSS 后缀表示样式表。

图像格式是通过 .gif 或 .jpeg 后缀来识别的。

多媒体元素同样拥有带有不同后缀的文件格式。

编码格式发展

1999：MPEG-4
2003：H.264
2010：VP8
2013：H.265,VP9
2015：VP10
2018：AV1

浏览器提供的原生多媒体能力

video 和 audio 元素方法：

• play()：开始播放音频/视频
• paused()：暂停当前播放
• load()：重新加载当前元素
• canPlayType()：检测浏览器是否能播放指定的类型
• addTextTrack()：向目标文件添加新的文本轨道
• autoplay()：设置或返回是否在加载完成后随即播放音频
• controls()：设置或返回是否显示控件

video 和 audio 元素的缺陷：

• 不支持直接播放hls、flv等视频格式
• 视频资源的请求和加载无法通过代码控制

Web多媒体技术的发展和突破

加密音视频播放
自适应码率
弹幕：无碰撞、交互弹幕、防挡人像。
网页推流
网页解码
云游戏原理和特点：无需安装、对硬件要求第、低延迟、强兼容性要求。

字节跳动Web多媒体技术发展

• 自主研发视频播放器
• xgplayer开源
• flv
• hls
• webrtc
• 视频编辑
• web heif
• 加密视频
• h265与防劫持
• 交互视频
• 云游戏