Web前端开发技术
上QQ阅读APP看书,第一时间看更新

2.7 HTML多媒体

多媒体有多种格式,它可以是听到或者看到的任何内容,包括文字、图片、音乐、音效、录音、电影、动画等。现代浏览器支持多种多媒体格式。

多媒体元素(例如视频和音频)存储于媒体文件中。确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名.htm或.html时,它会假定该文件是HTML页面。.xml扩展名指示XML文件,而.css扩展名指示样式表。图片格式则通过.gif或.jpg来识别。多媒体元素也拥有带有不同扩展名的文件格式,例如.swf、.wmv、.mp3以及.mp4。常用的视频格式有AVI、WMV、MPEG、QuickTime、RealVideo、Flash、Mpeg-4等。常用的音频格式有MIDI、RealAudio、Wave、WMA、MP3等。

2.7.1 HTML object元素

<object>元素的作用是支持HTML辅助应用程序。辅助应用程序(helper application)是可由浏览器启动的程序,也称为插件,是一种扩展浏览器标准功能的小型程序。插件有很多用途:播放音乐、显示地图、验证银行账号、控制输入等。可以使用<object>或者<embed>标签将插件添加到HTML页面。这些标签定义资源(通常为非HTML资源)的容器,根据类型,它们既会由浏览器显示,也会由外部插件显示。

使用插件播放视频和音频的一个优势是,能够允许用户控制部分或者全部播放设置。大多数辅助应用程序允许对音量设置和播放功能(例如后退、暂停、停止和播放)的手工(或者程序的)控制。

例2-17:

2.7.2 HTML音频

在HTML中播放音频,需要确保音频文件在所有浏览器中(Internet Explorer、Chrome、Firefox、Safari、Opera)和所有硬件上(PC、平板电脑、手机)都能够播放。

1.使用<embed>元素

<embed>标签用于定义嵌入的内容,例如插件,该元素实现与<object>元素相同的效果。这是一个HTML5标签,在HTML4中是非法的,但在所有浏览器中都有效。<embed>标签必须有src属性,指明嵌入内容的URL。下面的代码片段能够显示嵌入网页中的MP3文件:

存在的问题:

·<embed>标签在HTML 4中是无效的,页面无法通过HTML 4验证。

·不同的浏览器对音频格式的支持也不同。

·如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。

·如果用户的计算机未安装插件,无法播放音频。

·如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。

提示:使用<!DOCTYPE html>(HTML5)可以解决验证问题。

2.使用<object>元素

下面的代码片段能够显示嵌入网页中的MP3文件:

存在的问题:

·不同的浏览器对音频格式的支持不同。

·如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。

·如果用户的计算机未安装插件,无法播放音频。

·如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。

2.7.3 HTML视频

在HTML中播放视频,需要确保视频文件在所有浏览器中(Internet Explorer、Chrome、Firefox、Safari、Opera)和所有硬件上(PC、平板电脑、手机)都能够播放。

1.使用<embed>元素

下面的HTML代码显示嵌入网页的Flash视频:

存在的问题:

·HTML4无法识别<embed>标签,页面无法通过验证。

·如果浏览器不支持Flash,那么视频将无法播放。

·iPad和iPhone不能显示Flash视频。

·如果将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。

2.使用<object>元素

下面的HTML片段显示嵌入网页的一段Flash视频:

存在的问题:

·如果浏览器不支持Flash,将无法播放视频。

·iPad和iPhone不能显示Flash视频。

·如果将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。