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

Web多媒体入门

01.Web多媒体历史

1. Flash
2. H5
3. Media Source Extensions

02.基础知识

编码格式

• 图像的基本概念
  图像分辨率，位深度。
• 视频基本概念
  分辨率，帧率，码率。 GOP(group of picture)指两个I帧之间的间隔
• 编码中存在的冗余
  空间冗余，时间冗余，编码冗余，视觉冗余
• 编码数据处理流程

封装格式

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

多媒体元素和拓展API

1. <video>元素

   <video src="./video.mp4" muted autoplay controls width=600 height=300></video>
   或者
   <video muted autoplay controls width=600 height=300><source src="./video.mp4"></source>

   2.<audio>元素 <video src="./audio.mp3" muted autoplay controls width=600 height=300></video>
   或者
   <video muted autoplay controls width=600 height=300><source src="./audio.mp3"></source>

   3.两者的方法
   4.两者的属性
   5.两者的事件
   6.audio和video元素的缺陷

• 不支持直接播放hls、flv等视频格式。
• 视频资源的请求和加载无法通过代码控制（无法实现分段加载，精准预加载）

媒体源拓展API（Media Source Extensions）

优点：

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

流媒体协议

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

03.应用场景

总结与展望

Web前端中的重要元素就是多媒体。我们必须掌握相应的基础知识和新技术标准以更好的将多媒体技术应用于前端开发，丰富用户的体验。