不管是否承认，flash早已不像过往那样如日中天了。亚马逊全面放弃flash、苹果放弃flash、安卓也放弃了移动端的flash支持。事实上flash已经不太适合web开发了，因为HTML5中的video和audio这两个API为web开发提供了更高效的音频视频控制。或许你可以看看[这篇文章][flash]。
video标签
为何需要多个格式的视频文件
在HTML5页面中，我们可以使用video标签来实现对视频文件的控制。但是在浏览器中打开视频并没那么简单，不仅浏览器要支持标签，而且还要有编码译码器来播放视频。显然最好的解决方式是HTML5规范规定一个统一的编码译码器，然后让浏览器制造商去执行。 但是，那些这些制造商的尿性大家都是知道的，HTML5规范到最后也没有制定一个统一的视频编码译码器标准。 最后的情况是，如果要考虑视频在不同浏览器下的兼容性，开发者就要考虑好些情况了: - Opera、Mozilla、Chrome浏览器支持的Ogg Theora或者VP8编码译码器所能处理的 - Safari、IE高版本（9++）、Chrome支持的H.264 - IE低版本（8--）而.MP4后缀的视频文件是带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件； WebM是 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；Ogg是带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。
所以一般只需要Ogg、MP4和flv/swf格式的视频文件，也就是需要三个视频文件，就能完美地在各个浏览器间显示视频了。
当然，各浏览器支持一直在变动，所有脱离时间来谈支持的都是在耍流氓。可以在[caniuse][video]上查看下各浏览器对video的支持。
video标签的兼容代码
所以一般的<video>标签的内容，由简到繁的三种写法： - 最简单的形式是: ```javascript ``` - 兼容Firefox的写法 ```javascript ```- 兼容IE8的写法
<video width="400px" height="400px" controls>
<source src="video/ video.ogg" type="video/ogg" />
<source src="video/ video.mp4" type="video/mp4" />
<embed src="video/ movie.swf" type="application/x-shockwave-flash"
width="400" height="400px" allowscriptaccess="always" allowfullscreen="true"></embed>
抱歉，本站不欢迎你...
</video>
HTML5中媒体的类型（video和audio）
规定要检测的音频/视频类型（和可选的编解码器）。
常用值：
- video/ogg
- video/my4
- video/webm
- audio/mpeg
- audio/ogg
- audio/mp4
常用值，包括编解码器：
- video/ogg; codecs="theora, vorbis"
- video/mp4; codecs="avc1.4D401E, mp4a.40.2"
- video/webm; codecs="vp8.0, vorbis"
- audio/ogg; codecs="vorbis"
- audio/mp4; codecs="mp4a.40.5"
video标签中的属性
Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，以及一个内部使用的标签<source>。 1. src属性和poster属性 你能想象src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。 ``` javascript<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>
```
- preload属性
此属性用于定义视频是否预加载。如果有这个属性有三个可选择的值：none（页面加载后不载入视频）、meta（页面加载后只载入元数据）、auto（页面加载后载入整个视频）。如果不使用此属性，默认为auto。如果<video>标签有autoplay属性的话，会忽略preload属性。<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video> - autoplay属性
autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video> - loop属性
指定视频是否循环播放，也是一个布尔属性<video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video> - controls
布尔属性，用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
不同浏览器显示的控制器样式不一样，而这些其实都是可以通过使用HTML5中的video API来自己设定的，比如这个[video.js自定义视频播放器][player]。 - width和height
这个很清楚，不多说。 - <source>标签
用于给video标签指定多个可选择的视频文件地址，标签最后会选择一个，而且要在<video>标签没有src属性时使用。
浏览器按source标签的顺序检测指定的视频是否能播放，无法播放的原因可能是格式不支持，或者文件不存在等。如果不能播放，则尝试播放下一下。<source>标签不能单独出现，必须要放在媒体标签里面。
- src属性 指定媒体的地址，和video标签里的一样
- Type属性 说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。具体的属性值，请参见[w3c的文档][w3c]。
- Media属性 用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。 其实就是和<style>标签的media属性一模一样。
注意：XHTML中属性不允许简写，比如controls必须写作<video src='src/myvideo' controls='controls'>
HTML中的媒体API
HTML5中的媒体API给我们更强大的媒体控制能力。可以在[ 轻松学会HTML5播放器开发][studyVideo]这个学习页面简单了解下媒体API中常用的几个属性和方法。 > HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement关于媒体状态信息的媒体属性
只读属性
- error属性 只读。用于返回一个MediaError对象。MediaError对象的code属性包含了视频的错误状态，它是一个数字值（想想HTTP状态码），具体如下： - 1 = MEDIA_ERR_ABORTED - 取回过程被用户中止 - 2 = MEDIA_ERR_NETWORK - 当下载时发生错误 - 3 = MEDIA_ERR_DECODE - 当解码时发生错误 - 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频 使用方法： ``` javascript var myVid=document.getElementById("video1"); alert(myVid.error.code); ``` - currentSrc属性 只读。myVid.currentSrc会返回该媒体播放的文件的URL，和src属性不同。就算<video>标签有src属性且为相对路径，myVid.getAttribute('src')会返回src的值，而currentSrc却是会返回绝对路径。 如果未设置媒体文件，会返回空字符串。 - networkState属性 只读。myVid.networkState 属性返回媒体的当前网络状态（activity）。具体如下： - 0 = NETWORK_EMPTY - 音频/视频尚未初始化 - 1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络 - 2 = NETWORK_LOADING - 浏览器正在下载数据 - 3 = NETWORK_NO_SOURCE - 未找到音频/视频来源 - readyState属性 只读。myVid.readyState返回媒体当前播放的就绪状态。 - 0 = HAVE_NOTHING - 没有关于音频/视频是否就绪的信息，或者说当前播放位置无有效媒介资源 - 1 = HAVE_METADATA - 已经获得了音频/视频就绪的元数据,媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放,等待后续加载 - 2 = HAVE_CURRENT_DATA - 虽然当前播放位置的数据是可用的，但没有足够的数据来播放 - 3 = HAVE_FUTURE_DATA - 已经获得了后续播放的数据，可以进行播放，但不足以播放到最后 - 4 = HAVE_ENOUGH_DATA - 可以进行播放，且且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端 - seeking属性 只读。myVid返回一个布尔值，表明浏览器是否在媒体中寻址。true表示浏览器正在寻址，false表示浏览器已停止寻址。 寻址（Seeking）指用户在视频中跳跃到新的位置。使用如下代码： ``` javascript //当在视频进度条点击当前播放位置的后面时，span1的位置会显示'Seeking:true'，然后过一会变成'Seeking:false' myVid=document.getElementById("video1"); function isSeeking() { document.getElementById("span1").innerHTML=("Seeking: " + myVid.seeking); } myVid.addEventListener('seeking',isSeeking;) ``` - seekable属性 只读。myDiv.seekable会返回一个TimeRanges对象，这个对象表示媒体文件中用户可寻址的范围。可寻址范围指的是用户在媒体中可寻址（移动播放位置）的时间范围。 对于非流视频，通常可以寻址到视频中的任何位置，即使其尚未完成缓冲。 TimeRanges对象([MDN][mdn]):表示音频/视频的缓冲范围。缓冲范围是指已经缓冲的音频/视频的时间范围。如果用户在音频/视频中跳跃播放，将会得到多个缓冲范围。它的属性有： - length - 获得音频/视频中可寻址范围的数量 - start(index) - 获得可寻址范围的开始位置 - end(index) - 获得可寻址范围的结束位置 注意，第一个缓冲范围的下标index是0。 - played、paused、ended属性 均为只读。played返回一个TimeRanges对象，表明浏览器已播放的媒体的时间范围。 myVid.paused则返回一个布尔值，表明媒介是否暂停播放。因为只读，所以不能通过设置myVid.paused=false来继续播放。 myVid.ended返回一个布尔值，表明媒体是否已经结束。 - duration属性 只读。返回当前媒体文件的长度，以秒来计。 - buffered属性 只读。返回TimeRanges对象，确认浏览器已经缓存的文件。 可以看看[这个效果][tween]，就是靠JS操纵这些API来实现的可读写属性
- defalutPlaybackRate
设置或返回媒体的默认播放速度。
注意：设置该属性仅会改变默认的播放速度，而不是当前的。要改变当前的播放速度，要用playbackRate属性。 - playbackRate
设置或返回媒体的当前播放速度。 - currentTime属性
可读写属性。用于设置或者读取媒体播放的当前位置（以秒计）。如果是设置该属性，则播放会跳跃到指定位置。 - preload属性
返回媒体标签的preload属性值，或者对其赋值。 - autoplay属性
可读写属性。布尔值，表示媒体是否设置了自动播放。 - loop属性
可读写属性。布尔值，表示媒体是否设置了循环播放。 - controls属性
可读写属性。布尔值，表示媒体是否使用了浏览器默认的播放控制栏。 - src属性
设置或返回媒体文件的当前来源。 - volume属性
设置或者返回当前媒体的音量值。范围为0~1，0相当于静音，1是最大音量。 - muted属性
布尔值。表示当前媒体是否开启了静音。
媒体API中的方法
- play() 播放视频，并把myVid.paused强行设为false。
- pause()暂停视频，并把myVid.paused强行设为true。
- load() 重新载入视频，然后把myVid.playbackRate的值强行设为meVid.defaultPlaybackRate的值，且强行把media.error的值设为null。
- canPlayType(type)
测试浏览器是否支持特定的媒体类型。返回值有3个可能结果：空字符串（浏览器不支持此种媒体类型）、maybe（浏览器可能支持此种媒体类型）、probably（浏览器确定支持此种媒体类型）。
可能type在前面的媒体类型一节已说明。如果是带编码译码器的，只会返回probably。
媒体API中的事件
完整的事件列表 [w3c][w3cEvent] - loadstart事件：浏览器开始寻找指定的媒体时，即当加载过程开始时。 - durationchange事件：媒介时长（duration属性）改变。 比如：当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。 - loadedmetadata事件：浏览器获取完媒介资源的时长和尺寸。 - loadeddata事件：已加载当前播放位置的媒介数据。 - progress事件：浏览器正在获取媒介。 - canplay事件：浏览器能够开始媒介播放，但估计以当前速率播放不能直接将媒介播放完（播放期间需要缓冲）。 - canplaythrough事件：浏览器估计以当前速率直接播放可以直接播放完整个媒介资源（期间不需要缓冲）。 - abort事件：浏览器在完全加载前中止获取媒介数据。这是在媒体数据终止下载时触发，而不是出错时触发。 - suspend事件：该事件在媒体数据被阻止加载时触发。 可以是完成加载后触发，或者因为被暂停的原因。 - error事件：获取媒介数据，也就是媒体加载时出错。 - emptied事件：媒介元素的网络状态突然变为未初始化。 - stalled事件：浏览器尝试获取媒体数据，但数据不可用时触发。 - play事件：即将开始播放。 - pause事件：暂停播放。 - waiting事件：在视频由于需要缓冲下一帧而停止时触发。 - playing事件：在媒体文件因为缓冲而停止或暂停之后已就绪时触发。 比如：拉动行动条时。 - seeking事件：浏览器正在请求数据（seeking属性值为true）。 - seeked事件：浏览器停止请求数据（seeking属性值为false）。 - timeupdate事件：当前播放位置（currentTime属性）改变。比如用来实现显示播放了的时间。 - ended事件：播放由于媒介结束而停止。 - ratechange事件：播放速率（playbackRate属性）改变时触发。 - volumechange事件：音量（volume属性）改变或静音（muted属性）。事实上，当媒体加载时，会依次发下如下事件：
- loadstart
- durationchange
- loadedmetadata
- loadeddata
- progress
- canplay
- canplaythrough
更完整的媒体API可以查看[video和audio参考手册][ref]
音频的相关内容
<audio>用于定义音频文件，比如音乐或者其他的音频流。 目前<audio>支持3种文件格式:MP3、Wav、Ogg。也可以在[caniuse][audio]上查看目前的支持情况。 之前说过，HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement，所以<audio>和<video>的API基本是通用的，而且两个标签能使用的属性也相同。在HTML中播放音频
- 不使用
<audio>标签，使用插件：
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件可以使用<object>标签 或者<embed>标签添加在页面上.
这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。
使用插件的示例代码：
<embed height="50" width="100" src="horse.mp3">
<object height="50" width="100" data="horse.mp3"></object>
`<embed> `标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
- 最好的HTML5办法是使用
audio标签，然后如果失败代码回退至<embed>。缺点是要把音频转换为不同的格式，且<embed>无法回退来显示错误消息。 - 使用
<a>标签。
如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：
<a href="horse.mp3">Play the sound</a>
但是考虑到这种方式会显示成一个超链接，然后就需要对`<a>`元素进行处理了，因此不太推荐。
- 终级方法，使用库。
雅虎媒体播放器是一个免费的在线媒体播放器，只需要添加一行代码到页面底部就可以轻松地把HTML5页面制作成专业的播放列表：
<a href="horse.mp3">Play Sound</a>
<script src="http://mediaplayer.yahoo.com/latest"></script>
然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮。雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
关于内联声音的说明
> 当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。