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

一、本堂课重点内容：

本文主要讲述了Web多媒体历史、基础知识、应用场景、总结与展望等等

二、详细知识点介绍：

多媒体历史

网页三剑客：flash draemweaver fireworks播放插件

Html5原生支持音视频，Webp,ogg, mp4三种视频格式

media source extensions可以播放多格式

基础知识

编码格式

图像基本概念

图像分辨率:用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数。

图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数,或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个;一副单色图像存储每个像素需要8bit，则图像的像素深度为8位,最大灰度数目为2的8次方，既256个。

视频基本概念

分辨率:每一帧的图像分辨率

帧率:视频单位时间内包含的视频帧的数量

码率:就是指视频单位时间内传输的数据量,一般我们用kbps来表示，即千位每秒。

I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码

P帧又称帧间预测编码帧，需要参考前面的l帧或者P帧才能进行编码

B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别

dts:解码时间戳

pts:显示时间戳

没有B帧的时候，dts和pts一样，有B的时候，dts先解析i，p后解析b，tps则还是按照原来的顺序

GOP (group of picture)两个I帧之间的间隔

编码原因

占用更少的空间，去除冗余

空间冗余
时间冗余
编码冗余
视觉冗余

流程

graph TD
预测:去除空间冗余,时间冗余-->变换:去除空间冗余-->量化:去除视觉冗余--> 熵编码:去除编码冗余

封装格式

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

视频封装格式	视频文件格式
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

多媒体元素和扩展API

用source的方式引入，第一个不好使就可以用第二个资源

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

调用玩play很快调用pause的话会发生错误

方法	描述
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、lv等视频格式
视频资源的请求和加载无法通过代码控制
- 分段加载(节约流量)
- 清晰度无缝切换
- 精确预加载

媒体源扩展API (Media Source Extensions)

创建mediaSource实例
创建指向mediaSource的URL
监听sourceopen事件
创建sourceBuffer
向sourceBuffer中加入数据
监听updateend事件

let mimeCodec = 'video/mp4; codecs="avc1.42E01E， mp4a.40.2"';
let mediasource = new MediaSource();

video.src = URL.createObjectURL( mediaSource );
mediaSource.addEventListener( 'sourceopen',() {
    let mediaSource = this;
    let sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    fetchAB('frag_bunny.mp4',function (buf) {
        sourceBuffer.addEventListener( 'updateend ' , function () {
            mediaSource.end0fStream( );
            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( );
};

流媒体协议

HLS
HTTP-FLV
Dash
RTMP

HLS

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

应用场景

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

总结与展望

新技术标准

Webassembly
WebCodecs
WebGPU
WebVR、WebXR

WEB多媒体 ｜ 青训营笔记