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

122 阅读2分钟

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

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

一、Web多媒体历史

image.png

二、基础知识

01.编码格式

图像基本概念

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

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

视频基本概念

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

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

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

视频帧的分类

image.png

image.png 为什么要编码? image.png

image.png

image.png

image.png 编码数据处理流程 image.png

image.png

02.封装格式

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

image.png

image.png

03.多媒体元素和扩展API

image.png

image.png

image.png

image.png

audio和video元素缺陷

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

媒体源扩展API (Media Source Extensions)

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

1.创建mediaSource实例
2.创建指向mediaSource的URL
3.监听sourceopen事件
4.创建sourceBuffer
5.向sourceBuffer中加入数据
6.监听updateend事件

image.png

播放器播放流程

image.png

04.流媒体协议

image.png

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

三、应用场景

image.png