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

Web多媒体简介

？什么是多媒体

w3school定义：多媒体是我们可以看到和听到的一切：文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等等。
多媒体以多种方式存在。在因特网上，您会发现很多被嵌入网页中的元素，并且今天的 web 浏览器已支持多种多媒体格式。

基础知识

1. 编码
图像分辨率：在水平和垂直方向上图像所具有的像素个数
图像深度：存储每个像素所需要的比特数，决定了图像的每个像素可能的颜色数
分辨率：每一帧的图像分辨率
帧率：视频单位时间内包含的视频帧的数量
码率：视频单位时间内传输的数据量，单位一般是kbps（千位每秒）
I帧 P帧 B帧 GOP

I帧是内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码。 P帧是帧间预测编码帧，需要参考前面的l帧或者P帧才能进行编码 B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别 GOP(group of picture)：是两个I帧之间的间隔

？为什么要编码

空间冗余：
同一景物表面上采样点的颜色之间通常存在着空间相关性，相邻各点的取值往往相近或者相同。
时间冗余：
图像序列中的两幅相邻的图像，后一幅图像与前一幅图像之间有较大的相关性，这反映为时间冗余。
编码冗余
人们用于表达某一信息所需要的比特数总比理论上表示该信息所需要的最少比特数要大，它们之间的差距就是信息熵冗余
视觉冗余
人类视觉系统对于图像场的任何变化，并不是都能感知的。例如，对于图像的编码和解码处理时，由于压缩或量比截断引入了噪声而使图像发生了一些变化，如果这些变化不能为视觉所感知，则仍认为图像足够好。

编码流程

预测：去除空间冗余，时间冗余
变换：去除空间冗余
量化：去除视觉冗余
熵编码：去除编码冗余

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

视频封装格式	视频文件格式
AVI(Audio Video Interleave)	AVI
WMV(Windows Media Video)	WMV
MPEG(Moving Picture Experts Group) 分为MPEG-1，MPEG-2，MPEG-4	MPG MPEG VOB DAT 3GP MP4
Matroska	MKV
Real Video	RM RMVB
QuickTime File Format	MOV
Flash Video	FLV

3. 多媒体元素和扩展API

元素： vedio audio MSE

<!DOCTYPE html>
<html>
  <body>
    <video src="" muted autoplay controls width="600" height="300"></video>
    <audio src="" muted autoplay controls width="600" height="300"></audio>
  </body> 
</html>

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

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

<audio>和<video>元素的属性

属性	描述
autoplay	设置或返回是否在加载完成后随即播放音频/视频
controls	设置或返回音频视频是否显示控件（比如播放/暂停等)
currentTime	设置或返回音频/视频中的当前播放位置（以秒计)
duration	返回当前音频/视频的长度（以秒计)
src	设置或返回音频/视频元素的当前来源
volume	设置或返回音频/视频的音量
buffered	返回表示音频/视频已缓冲部分的TimeRanges对象
playbackRate	设置或返回音频/视频播放的速度。
error	返回表示音频/视频错误状态的MediaError对象
readyState	返回音频/视频当前的就绪状态。

<audio>和<video>元素的事件

事件	描述
loadedmetadata	当浏览器已加载音频/视频的元数据时触发
canplay	当浏览器可以开始播放音频/视频时触发
play	当音频/视频已开始或不再暂停时触发
playing	当音频视频在因缓冲而暂停或停止后已就绪时触发
pause	当音频/视频已暂停时触发
timeupdate	当目前的播放位置已更改时触发
seeking	当用户开始移动/跳跃到音频/视频中的新位置时触发
seeked	当用户已移动/跳跃到音频视频中的新位置时触发
waiting	当视频由于需要缓冲下一帧而停止时触发
ended	当目前的播放列表已结束时触发

<audio>和<video>元素的缺陷

不支持直接播放hls，flv等视频格式
视频资源的请求和加载无法通过代码控制
- 分段加载（节约流量）
- 清晰度无缝切换
- 精确预加载

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

let mimeCodec='video/mp4;codec="avc1.42E01E,mp4a.40.2"'
// 创建mediaScource实例
let mediaSource=new MediaSource()
// 创建指向mediaSource的URL
video.src=URL.createObjectURL(mediaSource)
// 监听sourceopen事件
mediaSource.addEventListener('sourceopen',()=>{
  let mediaSource=this;
  // 创建sourceBuffer
  // 向sourceBuffer中加入数据
  let sourceBuffer=mediaSource.addSourceBuffer(mimeCodec);
  fetchAB('frag_bunny.mp4',function(buf){
    // 监听updateend事件
    sourceBuffer.addEventListener('updateend',function(){
      mediaSource.endOfStreanm();
      video.play();
    });
    sourceBuffer.appendBuffer(buf);
  });
});
function fetchAB(url,cb){
    let xhr=new XMLHttpRequest
    xhr.open('get',url)
    xhr.responseType='arraybuffer'
    xhr.onload=function(){cb(xhr.response)}
    xhr.send()
}

播放器播放流程

Web多媒体入门 | 青训营笔记

Web多媒体简介