浏览器中的音视频知识总结(工作中需要和视频打交道必看!)

31,274

这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战

视频编码

视频,其实就是一系列连续播放的图片,如果1s钟播放24张图片,视频的帧率就是24。

如果视频的的尺寸是1920*1080,即一张图片的尺寸是1920*1080*3 bytes,乘3是因为一个像素点3个比特,分别存放rbg,那么一个30分钟的视频所需要的存储空间如下:

//1s视频需要的存储空间为:
1920*1080*3*24 bytes
//30min视频需要的存储空间:
1920*1080*3*24 * 60*30=250.28GB

可以看到,非常大,所以视频需要压缩,于是就有了编码(codec)的概念。视频的编码格式可以理解为压缩格式,不同的编码格式压缩率不同,常见的编码格式有 h264,mpeg4,vp8等。

此外,需要注意的一点是,因为编码格式是有版权问题的,所以不同的浏览器支持的编码格式不同,所以就会出现有些编码格式的视频在某些浏览器播放不了,或者只有声音没有画面的情况。

我们前端开发只需要记住一点,主流浏览器支持的视频编码格式是h264

封装格式

一个视频文件内会包含视频流和音频流,还有一些元数据,例如分辨率信息,标题等,这个文件的格式我们称为封装格式,可以理解为打包格式,常见的mp4,webp,mov,mpeg等都是封装格式。

封装格式往往是与视频编码无关的,一个mp4文件,里面的视频流编码可以是h264,也可以是mpeg,所以就会出现,同样都是mp4文件,有的浏览器可以放,有的浏览器就放不了的问题。

音视频标签

<video controls poster="1.jpg" src="1.mp4" loop muted></video>
<audio controls src="1.mp3"></audio>

src指定资源地址,poster为视频指定一张封面图,controls表示浏览器应该显示UI控件(每个浏览器样式不同)

常用属性

下面是video和audio的通用属性

image.png

常用事件

video和audio通用事件

image.png

常用方法

  • play() 控制视频开始播放
  • pause() 控制视频暂停播放

有了上述的属性、事件及方法,我们就可以做很多事了,比如自定义播放器,使用播放器本地预览视频等。

这篇文章写的太短了,加长版在这里

浏览器中的音视频知识总结v1.0