入门"/>
Web多媒体入门
Web多媒体入门
1、Web多媒体历史
2、基础知识
编码格式
图像基本概念
图像分辨率:用于确定组成一副图像的像素数据,就是指在水平和垂直方向上图像所具有的像素个数。如1920*1080(水平方向1920个像素、垂直方向1080个像素)
图像深度︰图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数,或可能的灰度级数。例如, 彩色图像每个像素用R,G,B三个分量表示,每个分量用8位,像素深度为24位可以表示的颜色数目为2的24次方,既16777216个﹔一副单色图像存储每个像素需要8bit,则图像的像素深度为8位,最大灰度数目为2的8次方,既256个。(图片的分辨率越大不一定所占据的存储空间越大,还要根据其图片深度占用位数。)
视频的基本概念
- 分辨率:每一帧图像的分辨率(所有帧分辨率相同)
- 帧率:视频单位时间内包含的视频帧的数量
- 码率:指视频单位时间内传输的数据量,一般用kbps标签,即千位每秒
视频帧的分类
- I帧
I帧对视频压缩编码无需依赖其他的帧,只要有I帧自己的数据就能完全解码。 - P帧(前项预测编码帧)
其解码要依赖前一帧,前一帧没解码自身也无法解码。 - B帧
其解码不仅要依赖前一帧,还要根据其后面的帧内容。
为什么要编码
假设存在一个图片,分辨率是1920*1080,则其未压缩的占用空间为:1920108024/8=6220800Byte,大约5.9M;若帧率为30FPS,时长 90分钟,则占用空间为大小 933G,这样的存储空间是不能接受的。因此编码的意义是为了压缩视频视频大小,为了更好的进行视频传输和节约存储空间。视频是有很多冗余的,包括空间冗余、时间冗余、编码冗余、视觉冗余等。
编码格式
封装格式
存储音视频、图片或字幕信息的容器,便于存储传输。
多媒体元素和扩展API
video和audio元素
在h5中,通过可以通过video标签和audio标签分别播放视频和音频。两种标签用法一样。
<video src="./video.mp4" muted autoplay width=600 height=300 control>
</video>
<video muted autoplay width=600 height=300 control><source src="./video.mp4"></source><source src="./video1.mp4"></source>
</video>
<!-- 可以写多个source标签 -->
元素方法
- play:开始播放音频/视频
- pause:暂停当前播放的音频/视频
- load:重新加载音频/视频元素
- canPlayType:检测浏览器是否能播放指定的音频/视频类型
- addTextTrack:向音频/视频添加新的文本轨道
play方法是异步的,立刻暂停,即立刻调用pause方法会报错
元素属性
- autoplay:设置或返回是否在加载完成后随即播放
- control:设置或返回是否显示控件
- currentTime:设置或返回视频/视频中的当前播放位置(以秒计)
- duration:返回当前视频/音频的长度
- src:设置或返回视频/音频的来源
- volume:设置或返回视频/音频的音量TimeRanges对象
- buffered:返回表示视频/音频已缓存部分的
- playbackRate:设置或返回视频/音频的播放速度
- error:返回表示错误状态的MediaError对象
- readyState:返回当前的就绪状态
元素事件
- loadedmetadata:浏览器开始加载视频/音频时触发
- canplay:浏览器可以开始播放视频/音频时触发
- play:视频/音频暂停时触发
- playing:在视频/音频在因缓冲而暂停或停止后已就绪时触发
- pause:视频/音频暂停时触发
- timeupdate:用于播放位置改变时触发
- seeking:用于开始跳跃到视频/音频中的新位置时触发
- seeked:用于已跳跃到视频/音频中的新位置时触发
- waiting:视频由于缓冲下一帧而停止时触发
- ended:播放列表已结束时触发
video和audio标签的缺陷
- 不支持直接播放hls、flv等格式视频
- 视频资源的请求和加载无法通过代码控制
- 分段加载(节约流量)
- 清晰度无缝切换(增强用户体验)
- 精确预加载(增强用户体验)
媒体源扩展MSE(Media Source Extensions)
- 无插件在Web端播放流媒体
- 支持播放hls、flv、mp4等格式视频
- 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等
mp4和fmp4
fmp4文件结构相比普通的MP4文件多了多个moof和moot文件,因此对流式播放支持得更加友好
流媒体协议
HLS全称是HTTP Live Streaming,是一个由Apple公司提出的基于HTTP的媒体流传输协议,用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。在IOS段,只要把M3U8的地址直接赋给video标签的src,就可以直接播放。
3、应用场景
Web多媒体:视频编辑、点播、直播、图片、云游戏、实时通信。
4、总结和展望
总结:
- flash > H5 video> MSE
- 编码格式、封装格式、多媒体元素、流媒体协议
- 应用场景
新技术标准:
- Webassembly
- WebCodecs
- WebGPU
- WebVR、WebXR
更多推荐
Web多媒体入门
发布评论