HTML5如何使用音频和视频HTML5如何使用音频和视频视频：多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。当前，video 元素支持三种视频格式，
<video src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg">
<!--此处添加字幕文件-->
<track label="English" kind="subtitles" srclang="en" src="./test.vtt" default>
您的浏览器不支持html5 video
</video> <!--字幕文件的格式如下：-->
<pre>
WEBVTT
1
00:00:00.240 --> 00:00:04.130
大家好 最近 Visual Studio 2013 做了一些更新
2
00:00:04.140 --> 00:00:08.110
那我们今天请到 twMVC 的 Dino
来为我们介绍这个更新里面关于 SASS Editor 的部分
3
00:00:18.120 --> 00:00:19.280
</pre>
音频：大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。当前，audio 元素支持三种音频格式：Ogg Vorbis、MP3、Wav
<audio controls src="http://www.w3school.com.cn/i/song.mp3"></audio>
<!--source提供多个音频元素，供浏览器自身播放能力自动选择，如果支持的不知一种，浏览器会选择第一个来源-->
<audio controls>
<source src="http://www.w3school.com.cn/i/song.mp3">
<source src="http://www.w3school.com.cn/i/song.ogg">
</audio>
<!--autoplay设置音频自动播放-->
<audio autoplay controls>
<source src="http://www.w3school.com.cn/i/song.mp3">
您的浏览器不支持audio
</audio>可脚本话的视频和音频
判断浏览器支持情况
// 判断浏览器是否支持audio或者video元素最简单的办法是用脚本动态创建它，然后检测特定的函数是否存在
var hasVideo = !!(document.createElement('video').canPlayType);audio 和 video 元素有这些共有的属性
| 属性 | 数据类型 | 说明 |
|---|---|---|
| autoplay | 布尔值 | 获取或设置 autoplay 标志。 |
| buffered | 时间范围 | 已下载的缓冲的时间范围对象。 |
| bufferedBytes | 字节范围 | 已下载的缓冲的字节范围对象。 |
| bufferingRate | 整数 | 下载速率，每秒平均接收到的位数。 |
| bufferingThrottled | 布尔值 | 是否对缓冲进行节流。 |
| controls | 布尔值 | 获取或设置 controls 属性，控制浏览器内置控件的显示与隐藏。 |
| currentLoop | 整数 | 媒体文件已循环的次数。 |
| currentSrc | 字符串 | 当前播放的媒体文件的 URL。 |
| currentTime | 浮点数 | 已经播放的秒数。 |
| defaultPlaybackRate | 浮点数 | 获取或设置播放速度，默认为 1 秒。 |
| duration | 浮点数 | 总播放时间，单位是秒。 |
| ended | 布尔值 | 是否已播放结束。 |
| loop | 布尔值 | 获取或设置【播放完成后是否再从头开始播放】。 |
| muted | 布尔值 | 获取或设置【是否镜音】。 |
| networkState | 整数 | 网络连接状态；0：空；1：正在加载；2：正在加载原数据；3：已经加载了第一帧；4：加载完成。 |
| paused | 布尔值 | 是否暂停。 |
| playbackRate | 浮点数 | 获取或设置【当前的播放速度】。 |
| played | 时间范围 | 当前已经播放的时间。 |
| readyState | 整数 | 是否已就绪。1：数据不可用；1：可以显示当前帧；2：可以开始播放；3：可以从头到尾播放。 |
| seekable | 时间范围 | 可以搜索的时间范围。 |
| seeking | 布尔值 | 播放器是否正移动到媒体文件的新位置。 |
| src | 字符串 | 媒体文件的来源，可以在任何时候重写这个来源。 |
| start | 浮点数 | 获取或设置【开始播放的位置】，单位是秒。 |
| totalBytes | 整数 | 当前资源所需的总字节数。 |
| videoHeight | 整数 | 视频的高度，只适用于 video。 |
| videoWidth | 整数 | 视频的宽度，只适用于 video。 |
| volume | 浮点数 | 获取或设置【当前音量】从 0.0 到 1.0。 |
audio 和 video 元素有这些共有的事件
| 事件 | 说明 |
|---|---|
| abort | 下载中断。 |
| canplay | 可以播放；readyState 为 2。 |
| canplaythrough | 播放可以继续，即不会被中断；readyState 为 3。 |
| canshowcurrentframe | 当前帧已下载；readyState 为 1。 |
| dataunavailable | 没有数据导致不能播放；readyState 为 0。 |
| durationchange | 改变了 duration 的值。 |
| emptied | 网络连接关闭。 |
| empty | 发生错误导致下载停止。 |
| ended | 已播放到末尾，所以播放停止。 |
| error | 下载期发生网络错误。 |
| load | 已加载完成。可能会被废弃，建议使用 canplaythrough。 |
| loadeddata | 媒体的第一帧已加载。 |
| loadedmetadata | 媒体的元数据已加载。 |
| loadstart | 下载已开始。 |
| pause | 播放已被暂停。 |
| play | 媒体已接受到开始播放的指令。 |
| playing | 媒体已开始播放。 |
| progress | 正在下载。 |
| ratechange | 改变了播放速度。 |
| seeked | 搜索结束。 |
| stalled | 浏览器正尝试下载，但未接收到数据。 |
| timeupdate | currentTime 被非法更新。 |
| volumechange | 改变了 volume 或 muted 值。 |
| waiting | 播放暂停，等待下载更多的数据。 |
检测编解码器的支持情况：audio 和 video 元素都有一个 canPlayType() 方法，它接收一个格式/编解码器的字符串，返回 “probably”、”maybe”、”“，所以这样这样使用
| 音频 | 字符串 | 支持的浏览器 |
|---|---|---|
| AAC | audio/mp4; codecs=”mp4a.40.2” | IE9+、Safari4+、iOS 版的 Safari |
| MP3 | audio/mpeg | IE9+、Chrome |
| Vorbis | audio/ogg; codecs=”vorbis” | Firefox 3.5+、Chrome、Opera 10.5+ |
| WAV | audio/wav; codecs=”1” | Firefox 3.5+、Chrome、Opera 10.5+ |
| 视频 | 字符串 | 支持的浏览器 |
|---|---|---|
| H.264 | video/mp4; codecs=”avcl.42E01E, mp4a.40.2” | IE9+、Safari4+、iOS 版的 Safari、Android 版 WebKit |
| Theora | video/ogg; codecs=”theora” | Firefox 3.5+、Chrome、Opera 10.5+ |
| WebM | video/webm; codecs=”vp8, vorbis” | Firefox 4+、Chrome、Opera 10.6+ |
if (audio.canPlayType("audio/mpeg")){
...
}
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
...
}捕获阶段， 目标阶段，冒泡阶段。如果事件绑定时候，禁止了冒泡，则事件流会停止在目标阶段。事件冒泡和事件捕获。事件冒泡指事件沿着DOM树向上通知，事件捕获和事件冒泡相反，事件沿着DOM数向下通知开发者可以自己决定事件处理注册到捕获阶段，或者是冒泡阶段。
element1.addEventListener(‘click‘,doSomething2,true) 如果最后一个参数为true，则注册到捕获阶段。
事件委托(事件代理)：简单说起来就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
原文：https://www.cnblogs.com/EricZLin/p/12306057.html