- 多媒体
- 基本用法
- 多媒体支持类型
- 多媒体格式兼容
- HTML 属性
- 控制多媒体
- 多媒体相关事件
- Web Audio API
多媒体
HTML5 前的多媒体需要借助第三方插件，例如 Flash，但是 HTML5 将网页中的多媒体带入了新的一章。
mutimedia.jpg
基本用法
// 音频
// 指定资源类型可以帮助浏览器更快的定位解码
<audio autobuffer autoloop loop controls>
<source src="/media/audio.mp3" type="audio/mpeg">
<source src="/media/audio.oga">
<source src="/media/audio.wav">
<object type="audio/x-wav" data="/media/audio.wav" width="290" height="45">
<param name="src" value="/media/audio.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
<p><a href="/media/audio.wav">Download this audio file.</a></p>
</object>
</audio>
// 视频
<video autobuffer autoloop loop controls width=320 height=240>
<source src="/media/video.oga">
<source src="/media/video.m4v">
<object type="video/ogg" data="/media/video.oga" width="320" height="240">
<param name="src" value="/media/video.oga">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
<p><a href="/media/video.oga">Download this video file.</a></p>
</object>
</video>
多媒体支持类型
HTML5 支持音频列表
HTML5 支持视频列表
多媒体格式兼容
测试音频兼容性。
var a = new Audio();
// 检测媒体类型返回
// 支持 - 'maybe' 或 'probably'
// 不支持 - ''
a.canPlayType('audio/nav');
HTML 属性
视频与音频的大部分属性和方法几乎相同。
| 属性 | 是否必须 | 默认值 | 备注 |
|---|---|---|---|
| src | 是 | 音频文件地址 URL | |
| controls | 否 | false | 显示控件 |
| autoplay | 否 | false | 音频就绪后自动播放 |
| preload | 否 | none | 可取值为 none、metadata、auto。音频在页面加载是进行加载，并预备播放。如果使用 autoplay 则忽略该属性（该属性失效） |
| loop | 否 | false | 是否循环播放 |
控制多媒体
方法
-
load()加载资源 -
play()播放 -
pause()暂停播放
属性
-
playbackRate1为正常速度播放，大于1为快速播放最高20。 -
currentTime调准播放时间，以秒为单位。 -
volume取值范围0到1 -
muted真假值
-
paused布尔值暂停 -
seeking布尔值跳转 -
ended布尔值播放完成 -
duration媒体时长数值 -
initialTime媒体开始时间
多媒体相关事件
-
loadstart开始请求媒体内容 -
loadmetadata媒体元数据以加载完成（时长，编码格式等） -
canplay加载一些内容但可播放 -
play调用play()或设置autoplay -
waiting缓冲数据不够，暂停播放 -
playing正在进行播放
全部事件列表
事件列表
Web Audio API
音频 W3C 官网定义在这里
