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

灯火星河
116 阅读3分钟

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

1、Web多媒体历史

image-20220817223014217.png

Flash ，1994年开始-2020，后来走下坡路，ios不支持flash

2、基础知识

01、编码格式
图像基本概念

image-20220817223302889.png

视频基本概念

image-20220817223311597.png

I帧、P帧、B帧

image-20220817223332826.png

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

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

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

GOP

image-20220817223652068.png

为什么要编码？

image-20220817223956229.png

如果不压缩，这个视频的大小太大了

可以分为几类

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

编码数据处理流程

image-20220817224057035.png

预测分为帧内预测和帧间预测，I帧即帧内预测

image-20220817224523793.png

02、封装格式
封装格式是什么

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

image-20220817224535044.png

便于存储和传输

常见的封装格式

image-20220817224813801.png

03、多媒体元素和扩展API

主要依赖video audio MSE

video audio 标签

image-20220817225024596.png

image-20220817225032113.png

image-20220817225113120.png

image-20220817225123189.png

image-20220817225134939.png

 <audio>和<video> 元素 缺陷
 - 不支持直接播放hls,flv等视频格式
 - 视频资源的请求和加载无法通过代码控制
   - 分段加载（节约流量）
   - 清晰度无缝切换
   - 精确预加载
媒体源扩展API

image-20220817225510279.png

image-20220817225523033.png

  • MSE播放流程 image-20220817225555015.png

  • 播放器播放流程

    image-20220817225638672.png

mp4和fmp4

image-20220817225716854.png

04、流媒体协议

image-20220817225730660.png

常用的一般是前三个

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

image-20220817230011686.png

image-20220817230020535.png

3、应用场景

基本分为这几类

image-20220817230100292.png

点播现在应用的也比较多，现在很多视频网站如爱奇艺基本都是点播，流程是视频上传到服务器，服务器进行转码，转成不同码率的码流，然后再进行分码到cdn

直播和点播差不多，要求实时性比较高

图片用img标签就可以

云游戏相当于一个端，手机端给出命令，程序运行在远端，再传回到前端，对延迟的要求比较高

实时通信，现在常用场景就是视频会议

视频编辑，以前是在本地进行视频编辑，现在在web也可以进行视频编辑

4、总结和展望

image-20220817230700370.png

这节课先讲了web多媒体的历史，主要分为三个阶段，从flash->H5->MSE。然后讲了编码格式，为什么要编码，还有编码格式的过程，封装格式，多媒体元素，流媒体协议，最后讲了应用场景，有什么作用，以及提出了新技术标准，在web多媒体入门学习过程中提供了较为明确的学习路线，帮助大家更好的学习。

avatar
文章
阅读
粉丝