不管是否承认，flash早已不像过往那样如日中天了。亚马逊全面放弃flash、苹果放弃flash、安卓也放弃了移动端的flash支持。事实上flash已经不太适合web开发了，因为HTML5中的video和audio这两个API为web开发提供了更高效的音频视频控制。或许你可以看看。
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格式的视频文件，也就是需要三个视频文件，就能完美地在各个浏览器间显示视频了。当然，各浏览器支持一直在变动，所有脱离时间来谈支持的都是在耍流氓。可以在上查看下各浏览器对video的支持。
video标签的兼容代码
所以一般的<video>标签的内容，由简到繁的三种写法：- 最简单的形式是:
- 兼容Firefox的写法
- 兼容IE8的写法
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>。
src属性和poster属性
你能想象src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。preload属性
此属性用于定义视频是否预加载。如果有这个属性有三个可选择的值：none（页面加载后不载入视频）、meta（页面加载后只载入元数据）、auto（页面加载后载入整个视频）。如果不使用此属性，默认为auto。如果<video>标签有autoplay属性的话，会忽略preload属性。autoplay属性
autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。loop属性
指定视频是否循环播放，也是一个布尔属性- controls 布尔属性，用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。 控制栏须包括播放暂停控制，播放进度控制，音量控制等等。 不同浏览器显示的控制器样式不一样，而这些其实都是可以通过使用HTML5中的video API来自己设定的，比如这个。
- width和height 这个很清楚，不多说。
<source>标签
用于给video标签指定多个可选择的视频文件地址，标签最后会选择一个，而且要在<video>标签没有src属性时使用。 浏览器按source标签的顺序检测指定的视频是否能播放，无法播放的原因可能是格式不支持，或者文件不存在等。如果不能播放，则尝试播放下一下。<source>标签不能单独出现，必须要放在媒体标签里面。 - src属性 指定媒体的地址，和video标签里的一样 - Type属性 说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。具体的属性值，请参见。 - Media属性 用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。 其实就是和<style>标签的media属性一模一样。 注意：XHTML中属性不允许简写，比如controls必须写作<video src='src/myvideo' controls='controls'>
HTML中的媒体API
HTML5中的媒体API给我们更强大的媒体控制能力。可以在这个学习页面简单了解下媒体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 - 不支持音频/视频 使用方法：
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对象():表示音频/视频的缓冲范围。缓冲范围是指已经缓冲的音频/视频的时间范围。如果用户在音频/视频中跳跃播放，将会得到多个缓冲范围。它的属性有：
- length - 获得音频/视频中可寻址范围的数量
- start(index) - 获得可寻址范围的开始位置
- end(index) - 获得可寻址范围的结束位置 注意，第一个缓冲范围的下标index是0。
- played、paused、ended属性 均为只读。played返回一个TimeRanges对象，表明浏览器已播放的媒体的时间范围。 myVid.paused则返回一个布尔值，表明媒介是否暂停播放。因为只读，所以不能通过设置myVid.paused=false来继续播放。 myVid.ended返回一个布尔值，表明媒体是否已经结束。
- duration属性 只读。返回当前媒体文件的长度，以秒来计。
- buffered属性 只读。返回TimeRanges对象，确认浏览器已经缓存的文件。 可以看看，就是靠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中的事件
完整的事件列表
- 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可以查看
音频的相关内容
<audio>用于定义音频文件，比如音乐或者其他的音频流。
目前<audio>支持3种文件格式:MP3、Wav、Ogg。也可以在上查看目前的支持情况。 之前说过，HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement，所以<audio>和<video>的API基本是通用的，而且两个标签能使用的属性也相同。在HTML中播放音频
- 不使用
<audio>标签，使用插件： 浏览器插件是一种扩展浏览器标准功能的小型计算机程序。 插件可以使用<object>标签 或者<embed>标签添加在页面上. 这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。 使用插件的示例代码：
`
- 最好的HTML5办法是使用
audio标签，然后如果失败代码回退至<embed>。缺点是要把音频转换为不同的格式，且<embed>无法回退来显示错误消息。 - 使用
<a>标签。 如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。 以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：
Play the sound
但是考虑到这种方式会显示成一个超链接，然后就需要对``元素进行处理了，因此不太推荐。
- 终级方法，使用库。 雅虎媒体播放器是一个免费的在线媒体播放器，只需要添加一行代码到页面底部就可以轻松地把HTML5页面制作成专业的播放列表：
Play Sound
然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮。雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
关于内联声音的说明
当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。
如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。具体代码
- 最少的代码
- 带有不兼容提醒的代码
- 能平稳退化的代码
track标签
<track> 标签为媒体元素（比如 <audio> and <video>）规定外部文本轨道。它也是HTML5中的新标签。
- default 规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。
- kind规定文本轨道的文本类型。可用值：
- captions 该轨道定义将在播放器中显示的简短说明。
- chapters 该轨道定义章节，用于导航媒介资源。
- descriptions 该轨道定义描述，用于通过音频描述媒介的内容，假如内容不可播放或不可见。
- metadata 该轨道定义脚本使用的内容。
- subtitles 该轨道定义字幕，用于在视频中显示字幕。
- src 规定轨道文件的URL。
- srclang 规定轨道文本数据的语言。可用值应该是双字母的语言代码，规定轨道的语言。
- label 规定文本轨道的标题。比如，当用户选择了字幕轨道时，标题就会显示出来。
媒体API中与track有关的内容
- addTextTrack(kind,label,language)方法 用于创建和返回新的TextTrack对象。新的TextTrack对象会被添加到媒体元素的文本轨道列表中。
- videoTracks属性
- 返回VideoTrackList对象，表示视频的可用视频轨道，每个可用的视频轨道是用VideoTrack对象表示的（主流浏览器暂不支持）。
- audioTracks属性 返回AudioTrackList对象。表示音频/视频的可用音频轨道。每个轨道用一个AudioTrack对象表示（主流浏览器暂不支持）。
- textTracks属性 返回TextTrackList对象，表示媒体的可用文本轨道。每个文本轨道是用TextTrack对象表示了。这个真能用！！ TextTrack对象 表示一个文本轨道。可用属性有： kind 获得文本轨道的类型（可以是 "subtitles"、"caption"、"descriptions"、"chapters" 或者 "metadata"） label 获得文本轨道的标签 language 获得文本轨道的语言 mode 获得或设置该轨道是否是活动的（"disabled"|"hidden"|"showing"） cues 获得 TextTrackCueList对象的cues列表 activeCues 获得TextTrackCueList对象形式的当前活动文本轨道cues addCue(cue) 向cues列表添加一个cue removeCue(cue) 从cues列表删除一个cue
这一节提到的另外还有VideoTrackList对象和VideoTrack对象，略微了解一下。具体说明如下：
VideoTrackList 对象
- videoTracks.length 获得视频中可用视频轨道的数量
- videoTracks.getTrackById(id)通过id获得VideoTrack对象
- videoTracks[index] 通过下标index获得VideoTrack对象
- videoTracks.selectedIndex获得当前VideoTrack对象的下标
VideoTrack对象
表示一个视频轨道，可用属性有：- id 获得视频轨道的id
- kind 获得视频轨道的类型（可以是"alternative"、"captions"、"main"、"sign"、"subtitles"、"commentary" 或 ""（空字符串））
- label 获得视频轨道的标签
- language 获得视频轨道的语言
- selected 获得或设置视频轨道是否是活动的（true|false）
给HTML5媒体使用字幕
可以看看（msdn)。这甚至能做到用JS提取每一时刻的显示字幕,用的是TextTrackCue的API，前面未讲到过，也可以在这个页面上看看。
使用字幕的代码如下：视频给了两字幕文件，一个是中文的，一个是英文的，默认英文字幕。
常用字幕格式为vtt模式，是以UTF-8编码的文本文件，为'text/vtt'，需要在服务器端进行配置。内容格式如下：WEBVTT 00:00:01.878 --> 00:00:05.334 曾经有一份真诚的爱情放在我面前， 00:00:08.608 --> 00:00:15.296 我没有珍惜，等我失去的时候我才后悔莫及， 人世间最痛苦的事莫过于此。