HTML5中视频音频的使用详解

HTML5中视频音频的使用详解

HTML5中视频音频的使用详解

HTML5提供了一种在网页中嵌入音频和视频的新方法，使得开发者可以更好地控制和展示媒体内容。本篇攻略将为您详细讲解如何在HTML5中使用音频和视频。

1. 视频标签

HTML5 提供了一个用于嵌入视频的 “video” 标签。如下所示：

<video controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   您的浏览器不支持 HTML5 video 标签。
</video>

在上述代码中，“video”标签中包含了两个“source”标签，它们分别指向不同格式的同一视频。如果您的网站访问者使用的是支持MP4格式的浏览器，将会播放“movie.mp4”；如果不支持，将会播放“movie.ogg”格式的视频。需要注意的是，如果用户使用的是不支持HTML5的浏览器，熟悉的flash播放器将会出现。

我们还可以添加其他属性，比如：宽度、高度、控件、自动播放、循环等等。例如：

<video width="320" height="240" controls autoplay>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
</video>

在上述代码中，“video”标签中加入了宽度和高度属性，同时增加了autoplay（自动播放）和控件（controls）属性。

1. 音频标签

HTML5提供了一个用于嵌入音频的“audio”标签。如下所示：

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 HTML5 audio 标签。
</audio>

在上述代码中，“audio”标签也包含了两个“source”标签，分别指向不同格式的同一音频。如果浏览器能够支持MP3格式，就会播放“music.mp3”；否则便会播放“music.ogg”格式的音频。同样的，如果用户使用的是不支持HTML5的浏览器，flash播放器就会出现。

对于“audio”标签，同样可以加入其他属性，例如：控件、自动播放、音量等等。例如：

<audio controls autoplay>
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 HTML5 audio 标签。
</audio>

在上述代码中，“audio”标签加入了控件属性并设置自动播放，同时“source”标签只服务于“music.ogg”格式的音频。

示例1：

<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   您的浏览器不支持 HTML5 video 标签。
</video>

在该实例当中，“video”标签被加入了宽度和高度属性和控件；而两个“source”标签指向了同一个视频的不同格式。如果浏览器支持MP4，那么就会播放“movie.mp4”，否则便会播放“movie.ogg”格式的视频，同时如果浏览器不支持HTML5，就会出现flash播放器。

示例2：

<audio controls autoplay>
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持 HTML5 audio 标签。
</audio>

在该实例中，“audio”标签加入了控件属性并设置自动播放，同时“source”标签服务一个音频文件的.ogg格式。如果浏览器支持该格式，那么就会播放文件“music.ogg”；否则浏览器将会提示访客该类型的媒体文件不被支持。