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

Mingcomity
99 阅读3分钟

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

Web多媒体入门

一.Web多媒体入门

  1. Flash
  2. HTML5
  3. Media Source Extensions

二.基础知识

1.编码格式

  • 图像基本概念

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

  • 视频基本概念

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

  • I帧、P帧、B帧

image-20220820211328962.png - I帧又称帧内编码帧，是一种自带全 部信息的独立帧，无需参考其他图像便可独立进行解码 - P帧又称帧间预测编码帧，需要参考前面的I帧或者P帧才能进行编码 - B帧又称双向预测编码帧，也就是B帧记录的是本帧与前后帧的差别

  • GOP （group of picture)

image-20220820211551079.png - 两个I帧最简单间隔

  • 为什么要编码？

    • 空间冗余

    • 时间冗余

      • 第N帧 与 第N+1帧

    • 编码冗余

    • 视觉冗余

  • 编码数据处理流程‘

    • image-20220820211847504.png

2.封装格式

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

image-20220820211948961.png

3.多媒体元素和扩展API

  • video

    • <!DOCTYPE html>
<html>
<body>
<video src="./video .mp4" muted autoplay controls width=600 he ight=300></video>
<video muted autoplay controls width=600 height=300>
<source src=" ./video.mp4"></ source>
</video>
</body>
</html>

  • audio

    • <!DOCTYPE html>
<html>
<body>
<audio src=" ./auido.mp3" muted autoplay controls width=600 he ight=300></ audio>
<audio muted autoplay controls width=600 height= 300>
<source src="./audio . mp3"></ source>
</ audio>
</body>
</html>

<audio>和<video>元素方法

image-20220820212417316.png

<audio>和<video>元素属性

image-20220820212437886.png

<audio>和<video>元素事件

image-20220820212514370.png

<audio>和<video>元素 缺陷

  • 不支持直接播放hls、flv等视频格式

  • 视频资源的请求和加载无法通过代码控制

    • 分段加载（节约流量）
    • 清晰度无缝切换
    • 精确预加载

  • MSE —— 媒体源扩展API

    • 无插件在web端播放流媒体

    • 支持播放hls、flv、mp4等视频格式

    • 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等

    • let mimeCodec = 'video/mp4; codecs=" avc1.42E01E, mp4a.40.2"';
let mediaSource = new MediaSource();
​
video.src = URL.create0bjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', ()=> {
    let mediaSource = this;
    let sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    fetchAB('frag. bunny .mp4', function(buf) {
        sourceBuffer.addEventListener(' updateend', function() {
            mediaSource.endOfStream();
            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();
};
      • 1.创建mediaSource实例
      • 2.创建指向mediaSource的URL
      • 3.监听sourceopen事件
      • 4.创建sourceBuffer
      • 5.向sourceBuffer中加入数据
      • 6.监听updateend事件

4.流媒体协议

image-20220820213255051.png

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

三.应用场景

image-20220820213352271.png

四.总结与展望

总结：

  • flash - H5 video - MSE
  • 编码格式、封装格式、多媒体元素、流媒体协议
  • 应用场景

新技术标准：

  • Webassembly
  • WebCodecs
  • WebGPU
  • WebVR、WebXR
avatar
文章
阅读
粉丝