在 HTML5 发布之前,没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。
目前,video 元素支持三种视频格式,如表 2 所示。
下面的例子展示了 video 元素的使用:
<! DOCTYPE HTML>
<html>
<body>
<videosrc=" vdeo.ogg"width="320"height="240"controls="controls">
This browser does not support the video element.
</video>
</body>
</html>
例子使用了 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作,我们必须添加一个 MPEG4 和 WebM 文件。
video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式,如下所示:
<videowidth="320"height="240"controls="controls">
<sourcesrc="vdeo.ogg"type="video/ogg"/>
<sourcesrc=" vdeo.mp4"type="video/mp4"/>
<sourcesrc=" vdeo.webm"type="video/webm"/>
This browser does not support the video element.
</video>
图6:Canvas 的输出
音频对于音频,情况类似于视频。在 HTML5 发布之前,在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。
目前,HTML5 audio 元素支持三种音频格式,如表 3 所示。
audio 元素的使用如下所示:
<! DOCTYPE HTML>
<html>
<body>
<audiosrc=" song.ogg"controls="controls">
This browser does not support the audio element.
</video>
</body>
</html>
此例使用 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作,我们必须添加一个 MP3 和 Wav 文件。
audio 元素允许多个 source 元素,它可以链接到不同的音频文件。浏览器将使用第一个识别的格式,如下所示:
<audiocontrols="controls">
<sourcesrc="song.ogg"type="audio/ogg"/>
<sourcesrc="song.mp3"type="audio/mpeg"/>
This browser does not support the audio element.
</audio>
画布(Canvas)