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

Web多媒体历史

基础知识

什么是多媒体？

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

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

编码格式

图像基本概念

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

视频基本概念

分辨率：每一帧的图像分辨率
帧率：视频单位时间内包含的视频帧的数量
码率：就是指视频单位时间内传输的数据量，一般我们用 kbps 来表示，即千位每秒。

编码的目的

编码的意义是为了压缩视频大小，为了更好的进行视频传输和节约存储空间。处理包括空间冗余、时间冗余、编码冗余、视觉冗余等。

多媒体元素和扩展API

<audio>和<video>元素
元素方法

• play：开始播放音频/视频
• pause：暂停当前播放的音频/视频
• load：重新加载音频/视频元素
• canPlayType：检测浏览器是否能播放指定的音频/视频类型
• addTextTrack：向音频/视频添加新的文本轨道

元素属性

• autoplay：设置或返回是否在加载完成后随即播放音频/视频
• controls：设置或返回音频/视频是否显示控件
• currentTime：设置或返回音频/视频中的当前播放位置(以秒计)
• duration：返回当前视频/音频的长度
• src：设置或返回视频/音频元素的当前来源
• volume：设置或返回视频/音频的音量
• buffered：返回表示视频/音频已缓存部分的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等格式视频
• 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

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