Web 多媒体入门 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第24天。
一、Web多媒体历史
二、基础知识
01.编码格式
图像基本概念
图像分辨率:用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数。
图像深度︰图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数,或可能的灰度级数。例如,彩色图像每个像素用R,G,B三个分量表示,每个分量用8位,像素深度为24位,可以表示的颜色数目为2的24次方,既16777216个﹔一副单色图像存储每个像素需要8bit,则图像的像素深度为8位,最大灰度数目为2的8次方,既256个。
视频基本概念
分辨率:每一帧的图像分辨率
帧率∶视频单位时间内包含的视频帧的数量
码率︰就是指视频单位时间内传输的数据量,一般我们用kbps来表示,即千位每秒。
视频帧的分类
为什么要编码?
编码数据处理流程
02.封装格式
封装格式:存储音视频、图片或者字幕信息的一种容器
03.多媒体元素和扩展API
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事件
播放器播放流程
04.流媒体协议
HLS全称是HTTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议,用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。
大致的播放流程: