HTML5媒体元素（audio与video）及其常用属性详解

HTML5媒体元素（audio与video）及其常用属性详解

HTML 音频(Audio)元素

HTML5 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
The element works in all modern browsers.

互联网上的音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。

今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了在网页上嵌入音频元素的标准，即使用<audio> 元素。

HTML 音频/视频 方法

HTML5 DOM 为 和 元素提供了方法、属性和事件。
这些方法、属性和事件允许您使用 JavaScript 来操作 和 元素。

方法	描述
addTextTrack()	向音频/视频添加新的文本轨道。
canPlayType()	检测浏览器是否能播放指定的音频/视频类型。
play()	开始播放音频/视频。
pause()	暂停当前播放的音频/视频。

audio元素的常用属性

属性	描述
autoplay	设置或返回是否在加载完成后随即播放音频。
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
duration	返回当前音频的长度（以秒计）
ended	返回音频的播放是否已结束。
loop	设置或返回音频/视频是否应在结束时重新播放。
paused	设置或返回音频/视频是否暂停。
preload	设置或返回音频/视频是否应该在页面加载后进行加载。

以下我们将使用 <audio> 标签来描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的),
同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效)。
如果失败，它会显示一个错误文本信息:

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

HTML5 视频(Video)元素

video元素的常用属性

属性	描述
autoplay	设置或返回是否在加载完成后随即播放音频。
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）。
loop	如果出现改属性，那么在媒体文件在完成播放后再次开始播放
width	设置视频播放器的宽度。
preload	设置或返回音频/视频是否应该在页面加载后进行加载。

以下实例中使用了 4 种不同的视频格式。
HTML 5 <video> 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。
如果均失败，则回退到 <embed> 元素。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object>
</video>