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

Web多媒体入门

一、Web多媒体历史

• Flash 1994年开始-2020 网页三剑客 flash draemweaver fireworks 播放插件 *ios不支持flash

Webp，ogg，mp4三种视频格式

二、基础知识

1.编码格式

• 图像的基本概念 图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。 图像深度：图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数，或可能的灰度级数。例如，彩色图像每个像素用R,G,B三个分量表示,每个分量用8位，像素深度为24位，可以表示的颜色数目为2的24次方，既16777216个；一副单色图像存储每个像素需要8bit，则图像的像素深度为8位，最大灰度数目为2的8次方，既256个。
• 视频的基本概念 分辨率：每一帧的图像分辨率 帧率：视频单位时间内包含的视频帧的数量 码率：就是指视频单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒。 I帧又称帧内编码帧，是一种自带全部信息的独立帧，无需参考其他图像便可独立进行解码 P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码 B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别 GOP（group of picture）：两个帧之间的间隔

2.封装格式

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

3.多媒体元素和扩展API

• vide
• audio

<audio>和<video>元素方法

<audio>和<video>元素缺陷

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

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

//创建mediaSource实例
let mineCodec = 'video/mp4; codes="avc1.42E01E,mp4a.40.2"';
let mediaSource = new MediaSource();
//创建指向mediaSource的URL
video.src = URL.createObjectURL(mediaSource);
//监听sourceopen事件
mediaSource.addEventListener('sourceopen',function(){
  let mediaSource = this;
  //创建sourceBuffer
  let sourceBuffer = mediaSource.addSourceBuffer(mineCodec);
  fetchAB('frag_bunny.mp4',function(buf){
    //监听updateend事件
    sourceBuffer.addEventListener('updateend',function(){
      mediaSource.endOfStream();
      video.play();
    });
    //向sourceBuffer中加入数据
    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();
}

4.流媒体协议

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