不管是否承认，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>。

1. src属性和poster属性

   你能想象src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。

2. preload属性

   此属性用于定义视频是否预加载。如果有这个属性有三个可选择的值：none（页面加载后不载入视频）、meta（页面加载后只载入元数据）、auto（页面加载后载入整个视频）。如果不使用此属性，默认为auto。如果<video>标签有autoplay属性的话，会忽略preload属性。

3. autoplay属性

   autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。

4. loop属性

   指定视频是否循环播放，也是一个布尔属性

5. controls
   布尔属性，用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
   控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
   不同浏览器显示的控制器样式不一样，而这些其实都是可以通过使用HTML5中的video API来自己设定的，比如这个。
6. width和height
   这个很清楚，不多说。

7. <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 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。
  使用插件的示例代码：

` `标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

• 最好的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  我没有珍惜，等我失去的时候我才后悔莫及，   人世间最痛苦的事莫过于此。