概述
HTML5新增了两个与媒体相关的标签，让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容，这两个标签是<audio>和<video>。使用这两个元素至少要在标签中包含src属性。位于开始和结束标签之间的任何内容都将作为后备内容，在浏览器不支持这两个媒体元素的情况下显示
使用
video
<video id="media" controls poster="http://ofjfvj5z7.bkt.clouddn.com/poster.png">
<source src="http://ofjfvj5z7.bkt.clouddn.com/trailer.mp4" type="video/mp4">
<source src="http://ofjfvj5z7.bkt.clouddn.com/trailer.webm" type="video/webm">
<source src="http://ofjfvj5z7.bkt.clouddn.com/trailer.ogv" type="video/ogg">
<div>
您的浏览器不支持HTML5视频
</div>
</video>使用字幕
<video src=video.ogg controls >
<track label=English kind=subtitles srclang=en src=subtitles_en.vtt>
<track label=Dutch kind=subtitles srclang=nl src=subtitles_nl.vtt>
Your browser does not support HTML5 video.
</video>音频
<audio controls>
<source src=http://ofjfvj5z7.bkt.clouddn.com/1.mp3>
An audio clip from Johann Sebastian Bach.
</audio>可设置属性
| 属性 | 说明 |
|---|---|
| autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | 显示控件，比如播放按钮 |
| loop | 音频结束时重新开始播放 |
| preload | 音频在页面加载时进行加载，并预备播放 如果使用 autoplay，则忽略该属性。 auto – 当页面加载后载入整个音频 meta – 当页面加载后只载入元数据 none – 当页面加载后不载入音频 |
| currentTime | 以s为单位返回从开始播放到目前所花的时间 |
| volume | 在0.0到1.0间设置音量值，或查询当前音量值 |
| muted | 设置是否静音 |
| autobuffer | 媒体播放器是否进行缓冲加载，如果设置了autoplay，则忽略此属性 |
只读属性
| 属性 | 说明 |
|---|---|
| duration | 获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN |
| paused | 如果媒体文件被暂停，则返回true，否则返回false |
| ended | 如果媒体文件播放完毕，则返回true |
| startTime | 返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区 |
| error | 在发生了错误后返回的错误代码 |
| currenSrc | 以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件 |
video特有属性
可以使用width和height属性设置video的大小，如果不设置该属性，则使用播放源文件的大小；如果播放源文件的大小不可用，则使用poster属性中的文件大小。poster属性表示所选图片URL，如果添加该属性，将在视频文件播放前显示该图片，而不是默认显示视频文件的第一帧。
<video id=media controls= preload=none poster=poster.png>
<source src=trailer.mp4 type=video/mp4>
</video>方法
| 属性 | 说明 |
|---|---|
| load() | 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载 |
| play() | 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放 |
| pause() | 暂停处于播放状态的音频、视频文件 |
| canPlay() | 检测当前浏览器是否支持媒体文件的类型 ,返回结果[‘ ‘|’maybe’|’Probably’] |
事件
| 属性 | 说明 |
|---|---|
| abort | 当音视频加载被异常终止时产生该事件 |
| canplay | 当浏览器可以开始播放该音视频时产生该事件 |
| canplaythrough | 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 |
| durationchange | 当媒体的总时长改变时产生该事件 |
| emptied | 当前播放列表为空时产生该事件 |
| ended | 当前播放列表结束时产生该事件 |
| error | 当加载媒体发生错误时产生该事件 |
| loadeddata | 当加载媒体数据时产生该事件 |
| loadedmetadata | 当收到总时长，分辨率和字轨等metadata时产生该事件 |
| loadstart | 当开始查找媒体数据时产生该事件 |
| pause | 当媒体暂停时产生该事件 |
| play | 当媒体播放时产生该事件 |
| playing | 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 |
| progress | 当获取到媒体数据时产生该事件 |
| ratechange | 当播放倍数改变时产生该事件 |
| seeked | 当用户完成跳转时产生该事件 |
| seeking | 当用户正执行跳转时操作的时候产生该事件 |
| stalled | 当试图获取媒体数据，但数据还不可用时产生该事件 |
| stalled | 当试图获取媒体数据，但数据还不可用时产生该事件 |
| suspend | 当获取不到数据时产生该事件 |
| timeupdate | 当前播放位置发生改变时产生该事件 |
| volumechange | 当前音量发生改变时产生该事件 |
| waiting | 当视频因缓冲下一帧而停止时产生该事件 |