《基于新信息技术的HTML5和CSS3网页设计进阶教程》课件_第2章.pptxVIP

第2章HTML5的多媒体;

2.1容器格式和编/解码格式

;;

目前，视频文件(视频容器)种类有很多，此处只列举一些最常见的：

●?AudioVideoInteractive(.avi)

●?FlashVideo(.flv)

●?MPEG-4(.mp4)

●?Matroska(.mkv)

●?Ogg(.ogv)

●?WebM(.webm)

;

2.1.2视频、音频的编/解码器

视频、音频的编/解码器其实就是一组算法，用来对视频或音频进行编码和解码。对视频和音频进行编码，是为了它们能够快速地传播。

需要注意的是，不同容器格式对应的编/解码器是不同的。

;

常见的音频编/解码器如下：

●?ACC

●?MPEG-3

●?OggVorbis

常见的视频编/解码器如下：

●?H.264

●?VP8

●?OggTheora

;

有些编/解码器是免费的，有些则受专利保护，需要付费，虽然HTML5很想统一指定编/解码器，但实施起来却困难重重，最后不得不放弃对编/解码器的要求。因此而引发的问题就是各种不同的浏览器对视频格式的支持是有区别的，后面我们将会详细讲解。Web开发人员只能熟悉各种浏览器对视频和音频编/解码器的支持情况，并针对不同的浏览器环境嵌入不同的源文件。相信随着HTML5的发展，HTML5对不同编/解码器的支持程度会越来越高，最终支持任何格式的视频文件。

;

2.2浏览器支持特性检测

;

根据这一特点，我们在一般页面制作中只需要在video或audio元素中写入提示信息即可。向页面中插入视频和音频的完整代码如下：

;

如果支持HTML5的浏览器，如Chrome则会显示如图2-2所示的内容。

;

如果不支持HTML5的浏览器，如IE8则会显示如图2-3所示的内容。

;

但是，如果你想要任何页面都能正确打开所制作的视频播放页面或者你需要对视频做更多的操作，就需要使用JavaScript。检测浏览器是否支持video和audio元素，我们可以用以下JavaScript函数来进行。

检测页面是否支持video的代码如下：

;

如果浏览器支持video及audio元素，则被创建的元素对应的DOM对象会有一个名为canPlayType()的方法，反之，该对象只会拥有一些所有元素都具有的公共属性。我们先动态创建一个需要检测的对象，检测canPlayType()方法是否存在，再通过“!!”运算符将结果转换成bool值，就可以检测出元素是否被支持。

如果检测到浏览器不支持video或audio元素，那么我们可以使用JavaScript向页面嵌入媒体标签来引入想要播放的视频。虽然同样可以用脚本控制媒体，但是使用的是诸如Flash等其他播放技术。

;

2.3视频、音频的脚本控制

;;;

2.4HTML5中的音频

;;

这段代码中，在页面中嵌入了一个名为“audio.mp3”的音频文件，它和HTML文档在同一个路径下。在Chrome浏览器中打开的效果如图2-4所示，在图中可以看到一个音频播放器，它有播放/暂停按钮、播放时间/总播放时间、播放进度条、声音控制滑动条及更多操作按钮(展开后有一个下载按钮，有些浏览器会直接显示为下载按钮)。这是HTML5默认音频播放器，支持audio元素的不同浏览器显示的外观有区别，但功能基本一致。

;;

在上面的代码中，向页面中嵌入音频的代码为：

;

代码中，src属性用于告诉浏览器播放的声音的数据源位置；controls属性告诉浏览器显示用户控件，如果不设置显示用户控件，则页面上将不会显示播放器，当然你也无法开始播放音乐，除非你设置音乐自动播放；开始标签和结束标签中间的文字用于为不支持audio元素的浏览器提供替代显示内容，当然，这些文字你也可以将它设置为Flash播放器等播放插件，或者直接给出播放源文件的链接地址。

;

audio标签有很多属性，用于为音频提供更多的设置，如表2-5所示。

;

例2-1制作一个带有背景音乐的页面。

带有背景音乐页面的完整代码如下：

;

代码非常简单，思路也不难，背景音乐有几个特点：

(1)打开页面后，背景音乐会自动播放；

(2)背景音乐不需要显示音乐播放控制器；

(3)背景音乐应该循环播放。

总结了背景音乐的特点后，我们就能很容易地为页面添加背景音乐了。首先使用audio元素在页面中嵌入一个音频，使用autoplay属性设置页面加载完成后自动播放歌曲；不加入controls属性，页面中则不会生成播放控制器；使用loop属性设置音乐循环播放。

;

一般设置背景音乐的目的是给页面渲染某种氛