关于 HTML5 你需要了解的基础知识(2)

在 HTML5 发布之前,没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。

目前,video 元素支持三种视频格式,如表 2 所示。

关于 HTML5 你需要了解的基础知识

下面的例子展示了 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 的输出

图6:Canvas 的输出

音频

对于音频,情况类似于视频。在 HTML5 发布之前,在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。

目前,HTML5 audio 元素支持三种音频格式,如表 3 所示。

关于 HTML5 你需要了解的基础知识

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)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/cbf14851fbae7e859917987d7c1da06e.html