多媒体基础|青训营笔记

D9
65 阅读3分钟

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

一、课堂重点内容

  • 多媒体历史
  • 基础知识
  • 应用场景
  • 总结与展望

二、详细知识点介绍

图像基本概念

图像分辨率

用于确定组成一幅图像的像素数据，就是指在水平和垂直方向上图像锁具有的像素个数

图像深度

存储每个像素所需要的比特数。比如彩色图像用RGB三个分量表示，每个分量范围为0~255，8位（2^8），像素深度位24位，可以表示的颜色数目为2^24个

视频基本概念

分辨率

每一帧的图像分辨率

帧率

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

码率

单位时间内传输的数据量，一般我们用kbps来表示，即千位每秒

视频帧

  • I帧:不依赖其他帧，只要有I帧就能解码该图片
  • P帧:解码依赖于前一帧图片
  • B帧:同时依赖前一帧与后一帧，只有前后都解码才能解码该帧
  • DTS（Decoding Time Stamp）：即解码时间戳，这个时间戳的意义在于告诉播放器该在什么时候解码这一帧的数据。
  • PTS（Presentation Time Stamp）：即显示时间戳，这个时间戳用来告诉播放器该在什么时候显示这一帧的数据。
  • GOP（group of picture）：两个I帧之间的间隔

为什么要编码

image.png 如果不进行压缩，一部90分钟的1080p电影占据的空间为933G

编码

image.png

多媒体元素与拓展API

  • video 元素提供了 播放、暂停和音量控件来控制视频。同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。<video> 与 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：image.pngimage.png
  • audio:control 属性供添加播放、暂停和音量控件。在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件image.png
  • MSE image.png

三、实践联系例子

video标签的使用

<video src="./video.mp4" muted autoplay controls width=600 height=300></video>
//类型1
<video muted autoplay controls width=600 height=300>
    <source src="./video.mp4"></source>
</video>
//类型2

audio标签的使用

<audio controls> 
<source src="horse.ogg" type="audio/ogg"> 
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。 
</audio>

MSE

image.png

四、课后个人总结

图像和图形的区别

图形一般指用计算机绘制的画面，如直线、圆、圆弧、任意曲线和图表等；图像则是指由输入设备捕捉的实际场景画面或以数字化形式存储的任意画面。

图形只保存算法和特征点，所以相对于位图（图像）的大量数据来说，它占用的存储空间也较小。但由于每次屏幕显示时都需要重新计算，故显示速度没有图像快。另外，在打印输出和放大时，图形的质量较高而点阵图（图像）常会发生失真。图形是指在一个二维空间中可以用轮廓划分出若干的空间形状，图形是空间的一部分不具有空间的延展性，它是局限的可识别的形状。

五、引用参考

理解音视频 PTS 和 DTS - SamirChen - 博客园 (cnblogs.com)

HTML5 Audio(音频) | 菜鸟教程 (runoob.com)

HTML5 Video(视频) | 菜鸟教程 (runoob.com)

Media Source Extensions API - Web API 接口参考 | MDN (mozilla.org)

avatar
文章
阅读
粉丝