Web多媒体

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

今天我们介绍Web多媒体

什么是多媒体

多媒体（Multimedia）指图片、声音、音乐、动画和视频。现代的 web 浏览器支持多种多媒体格式。是我们可以看到和听到的一切：文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等等。

多媒体的作用

向用户提供丰富的信息
多媒体向用户提供多种形式的信息，让用户能够使用多种感官了解某个事物，从而加深对钙食物的印象和认知
多媒体是信息更形象生动
使用多媒体可以将静态的信息，以动态的形式进行表现，更加有趣，同时用户还也可以与媒体进行互动，产生相应的改变，提高用户体验。

web中的多媒体

文字
在网页发展的早期，都是用文字展示信息，没有其他的媒体形式
图片
在经过一段时间的发展之后，开始出现图片
音频、视频、动画
在HTML5中出现新增的audio和video元素使网页能够显示视频和音频
动画方面，在css3没有提出动画功能之前，都是通过Flash制作动画在嵌入到网页中，随着技术的发展css3提出动画功能，Flash技术逐渐被淘汰，如今大都使用css动画或者js制作动画和特效

web应用多媒体的问题

兼容性
由于多媒体的格式较多，仅图片的格式就有jpg、gif、png、webp等格式，再加上视频和音频也都有各自的格式，而浏览器又有多种，每种浏览器对文件格式的支持情况不同，在开发网页时就需要考虑兼容性的问题
网页性能问题
多媒体文件在网页上显示都需要向服务器发送请求在加载到网页中，这个过程需要花费时间，有的媒体形式数据较大特别是视频，数据量要多于其他形式的信息，加载时将更长，用户需要等待的时间也会更长，降低用户体验，从而减少网页的访问量达不到商业目的。

基础知识

图像基本概念

图像分辨率：用于确定组成一副图像的像素数据，就是指在水平和垂直方向上图像所具有的像素个数。如1920*1080（水平方向1920个像素、垂直方向1080个像素）

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

视频的基本概念

分辨率：每一帧图像的分辨率（所有帧分辨率相同）
帧率：视频单位时间内包含的视频帧的数量
码率：指视频单位时间内传输的数据量，一般用kbps标签，即千位每秒

视频帧的分类

I帧
I帧对视频压缩编码无需依赖其他的帧，只要有I帧自己的数据就能完全解码。
P帧（前项预测编码帧）
其解码要依赖前一帧，前一帧没解码自身也无法解码。
B帧
其解码不仅要依赖前一帧，还要根据其后面的帧内容。

多媒体元素和扩展API

video元素

内联视频（Inline Videos）

当视频被包含在网页中，或作为网页的一部份，它就被称为内联视频。

通过使用元素，可向网页添加内联视频。

使用元素

Internet Explorer 支持元素中的 dynsrc 属性。
该元素的作用是在网页中嵌入多媒体元素：

<img dynsrc="video.avi" />

上面的代码片断为网页设置了一个嵌入的 AVI 文件。
注释：dynsrc 属性不是标准的 HTML 或 XHTML 元素。仅有 Internet Explorer 支持该属性。

使用 embed 元素

Internet Explorer 和 Netscape 都支持元素。
该元素的作用是在网页中嵌入多媒体元素：

<embed src="video.avi" />

上面的代码片断为网页设置了一个嵌入的 AVI 文件。
您可在本教程的最后一节找到 embed 元素的属性列表。
注释：Internet Explorer 和 Netscape 都支持 embed 元素，但它不是标准的 HTML 或 XHTML 元素。万维网联盟 (W3C) 推荐使用 object 元素来代替它。

使用 object 元素

Internet Explorer 和 Netscape 都支持元素。
该元素的作用是在网页中嵌入多媒体元素：

<object data="video.avi" type="video/avi" />

上面的代码片断在网页设置了一个嵌入的的 AVI 文件。您可在本教程的最后一节找到元素的属性列表。

更多的多媒体用法可以看 Web 多媒体)

如有不对之处，欢迎指出。