目录
- 多媒体元素的基本介绍
- 多媒体元素的基本属性
- 多媒体元素的常用方法
- 多媒体元素的重要事件
1. 多媒体元素的基本介绍
在HTML5中，新增了两个元素 video 元素与audio元素。video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。使用这两个元素，就不在需要使用其他插件了，只需要支持HTML5的浏览器即可。
| 浏览器 | 支持情况 |
|---|---|
| Chrome | 3.0及以上版本 |
| Firefox | 3.5及以上版本 |
| Opera | 10.5及以上版本 |
| Safari | 3.2及以上版本 |
使用这两个元素非常简单，首先以audio元素为例，只要把播放音频的url指定的该元素的src就可以了。如下：
<audio src="http://xxxx.mp3">你的浏览器不支持audio属性</audio>
video使用的方法也很简单，只要把播放音频的url指定的该元素的src就可以了
<video src="http://xxxx.mp3">你的浏览不支持video属性</video>
另外，还可以通过source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式来播放，浏览器的选择顺序为代码中的书写顺序，它会从上到下判断自己是否支持该播放格式，直到选择自己支持的播放格式为止
<video width="640" height="360">
<source src="video/xxxx.ogv"></source>
<source src="video/xxxx.mov"></source>
</video>
2. 多媒体元素的基本属性
video属性和audio属性所具有得属性大致相同，接下来介绍其属性。
| 属性 | 描述 |
|---|---|
| controls | 显示或隐藏用户控制界面 |
| autoplay | 媒体是否自动播放 |
| Loop | 媒体是否循坏播放 |
| currentTime | 开始到播放现在所用的时间 |
| duration | 媒体总时间(只读) |
| volume | 0.0-1.0的音量相对值 |
| muted | 是否静音 |
| autobuffer | 开始的时候是否缓存加载,autoplay加载的时候可以忽略次属性 |
| poster | 视频播放器的预览图片 |
| Width,height | 设置视频的尺寸 |
| videoWidth,videoHeight | 视频实际尺寸 |
注意:video标签拥有着额外的属性。如果想读取duration()总时长，必须监听canplay事件
3. 多媒体元素的常用方法
媒体播放时，HTML5为我们提供了3种比较常用的方法
| 方法 | 描述 |
|---|---|
| media.paly() | 视频播放 |
| media.pause() | 暂停视频 |
| media.load() | 重新加载视频 |
4. 多媒体元素的重要事件
在利用video元素或audio元素读取或播放媒体数据时，会触发一系列的事件。如果使用javascript脚本捕获事件，就可以对这些事件处理，我们常常要利用 addEventListener 方法VideoElement.addEventListener(type,listener,useCaptrue)
VideoElement表示页面的video或audio元素;type表示事件名称,listener表示绑定的函数，useCaptrue是一个布尔值，表示事件的响应顺序,该值如果是true，浏览器采用captrue响应方式,如果为false，浏览器采用budding响应方式，默认情况为false。
- canplay：媒体元素能够播放触发
- ontimeupdate:监听媒体元素进度条事件