video与audio元素基础

在HTML5中，video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。

以audio元素为例，只要把播放音频的URL给指定元素的src属性就可以了，例如：

通过这种方法，可以把指定的音频数据直接嵌入在网页上，其中“您的浏览器不支持audio元素！”为在不支持audio元素的浏览器中所显示的替代文字。

video元素的使用方法也很简单，只要设定好元素的长、宽等属性，并且把播放视频的URL地址指定给该元素的src属性就可以了，示例如下：

另外，还可以通过使用source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，浏览器的选择顺序为代码中的书写顺序，它会从上往下判断自己对该播放格式是否支持，直到选择到自己支持的播放格式为止。其使用方法如下所示：

source元素具有以下几个属性：

• src属性是指播放媒体的URL地址；
• type属性表示媒体类型，其属性值为播放文件的MIME类型，该属性中的codecs参数表示所使用的媒体的编码格式。

因为各浏览器对各种媒体类型及编码格式的支持情况都各不相同，所以使用source元素来指定多种媒体类型是非常有必要的。

• IE9：支持H.264和VP8视频编码格式；支持MP3和WAV音频编码格式。
• Firefox 4及以上、Opera 10及以上：支持Ogg Theora和VP8视频编码格式；支持Ogg vorbis和WAV音频格式。
• Chrome 6及以上：支持H.264、VP8和Ogg Theora视频编码格式；支持Ogg vorbis和MP3音频编码格式。

• 音频和视频元素的属性

  这两种元素所具有的属性大致相同，介绍如下：

  src属性和autoplay属性

  src属性用于指定媒体数据的URL地址。

  autoplay属性用于指定媒体是否在页面加载后是否自动播放，使用方法如下：

  Html代码  

  1. <video src=“sample.mov” autoplay=“autoplay”></video>

  perload属性

  该属性用于指定视频或音频数据是否预加载。如果使用预加载，则浏览器会预先将视频或音频数据进行缓冲，这样可以加快播放速度，因为播放时数据已经预先缓冲完毕。该属性有三个可选值，分别是“none”、“metadata”和“auto”，其默认值为“auto”。

  • none值表示不进行预加载；
  • metadata表示只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续时间等）。
  • auto表示预加载全部视频或音频。
  Html代码  

  1. <video src=“sample.mov” preload=“auto”></video>

  poster（video元素独有属性）和loop属性

  当视频不可用时，可以使用该元素向用户展示一幅替代用的图片。当视频不可用时，最好使用poster属性，以免展示视频的区域中出现一片空白。该属性的使用方法如下：

  Html代码  

  1. <video src=“sample.mov” psoter=“cannotuse.jpg”></video>

  loop属性用于指定是否循环播放视频或音频，其使用方法如下：

  Html代码  

  1. <video src=“sample.mov” autoplay=“autoplay” loop=“loop”></video>

  controls属性、wdith属性和height属性（后两个video元素独有）

  在该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具有播放、暂停等按钮。其使用方法如下：

  Html代码  

  1. <video src=“sample.mov” controls=“controls”></video>

  开发者也可以在脚本中自定义控制条，而不使用浏览器默认的。

  width属性与height属性用于指定视频的宽度与高度（以像素为单位），使用方法如下：

  Html代码  

  1. <video src=“sample.mov” width=“500” height=“500”></video>

  error属性

  在读取、使用媒体数据的过程中，在正常情况下，该属性为null，但是任何时候只要出现错误，该属性将返回一个MediaError对象，该对象的code属性返回对应的错误状态码，其可能的值包括：

  • MEDIA_ERR_ABORTED（数值1）：媒体数据的下载过程由于用户的操作原因而被终止。
  • MEDIA_ERR_NETWORK（数值2）：确认媒体资源可用，但是在下载时出现网络错误，媒体数据的下载过程被终止。
  • MEDIA_ERR_DECODE(数值3）：确认媒体资源可用，但是解码时发生错误。
  • MEDIA_ERR_SRC_NOT_SUPPORTED（数值4）：媒体资源不可用媒体格式不被支持。

  error属性为只读属性，示例如下：

  Js代码  

  1. $(function() {
  2.     $(“audio”).bind(“error”, function(event) {
  3.         var error = event.target.error;
  4.         switch(error.code) {
  5.             case 1:$(“#console”).prepend(“<span>视频或音频的下载过程被终止。</span><br/>”); break;
  6.             case 2:$(“#console”).prepend(“<span>网络发生故障，视频或音频的下载过程被终止。</span><br/>”); break;
  7.             case 3:$(“#console”).prepend(“<span>解码失败。</span><br/>”); break;
  8.             case 4:$(“#console”).prepend(“<span>不支持的视频或音频格式。</span><br/>”); break;
  9.         }
  10.     });
  11. });

  networkState属性

  该属性在媒体数据加载过程中读取当前网络的状态，其值包括：

  • NETWORK_EMPTY（数值0）：元素处于初始状态。
  • NETWORK_IDLE（数值1）：浏览器已选择好用什么编码格式来播放媒体，但尚未建立网络连接。
  • NETWORK_LOADING（数值2）：媒体数据加载中。
  • NETWORK_NO_SOURCE（数值3）：没有支持的编码格式，不执行加载。

  networkState属性为只读属性，使用示例如下：

  Js代码  

  1. $(function() {
  2.     $(“video”).bind(“progress”,function(event) {
  3.         var state = event.target.networkState;
  4.         switch(state) {
  5.             case 0:
  6.                 $(“#console”).prepend(“<span>正在进行初始化。</span><br/>”);
  7.                 break;
  8.             case 1:
  9.                 $(“#console”).prepend(“<span>已选择好编码格式，尚未建立网络连接。</span><br/>”);
  10.                 break;
  11.             case 2:
  12.                 $(“#console”).prepend(“<span>加载中…</span><br/>”);
  13.                 break;
  14.             case 3:
  15.                 $(“#console”).prepend(“<span>加载失败。</span><br/>”);
  16.                 break;
  17.         }
  18.     });
  19. });

  currentSrc属性、buffered属性

  可以用currentSrc属性来读取播放中的媒体数据的URL地址，该属性为只读属性。

  buffered属性返回一个实现TimeRanges接口的对象，以确认浏览器是否已缓存媒体数据。TimeRanges对象表示一段时间范围，在大多数情况下，该对象表示的时间范围是一个单一的以“0”开始的范围，但是如果浏览器发出Range Rquest请求，这时TimeRanges对象表示的时间范围是多个时间范围。

  TimeRanges对象具有一个length属性，表示有多少个时间范围，多数情况下存在时间范围时，该值为“1”；不存在时间范围时，该值为“0”，该对象有两个方法：start(index)和end(index)，多数情况下将index设置为“0”就可以了。当用element.buffered语句来实现TimeRanges接口时，start(0)表示当前缓存区内从媒体数据的什么时间开始进行缓存，end(0)表示当前缓存区内的结束时间。buffered属性为只读属性。

  readyState属性

  该属性返回媒体当前播放位置的就绪状态，其值包括：

  • HAVE_NOTHING（数值0）：没有获取到媒体的任何信息，当前播放位置没有可播放数据。
  • HAVE_METADATA（数值1）：已经获取到了足够的媒体数据，但是当前播放位置没有有效的媒体数据（也就是说，获取到的媒体数据无效，不能播放）。
  • HAVE_CURRENT_DATA（数值2）：当前播放位置已经有数据可以播放，但没有获取到可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获得，但还没有获取到下一帧的数据，或者当前帧已经是播放的最后一帧。
  • HAVE_FUTURE_DATA（数值3）：当前播放位置已经有数据可以播放，而且也获取到了可以让播放器前进的数据。当媒体为视频时，意思是当前帧的数据已获取，而且也获取到了下一帧的数据，当前帧是播放的最后一帧时，readyState属性不可能为HAVE_FUTURE_DATA。
  • HAVE_ENOUGH_DATA（数值4）：当前播放位置已经有数据可以播放，同时也获取到了可以让播放器前进的数据，而且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放。

  readyState属性为只读属性。

  seeking属性和seekable属性

  seeking属性返回一个布尔值，表示浏览器是否正在请求某一特定播放位置的数据，true表示浏览器正在请求数据，false表示浏览器已停止请求。

  seekable属性返回一个TimeRanges对象，该对象表示请求到的数据的时间范围。当媒体为视频时，开始时间为请求到视频数据第一帧的时间，结束时间为请求到视频数据最后一帧的时间。

  这两个属性均为只读属性。

  currentTime属性、startTime属性和duration属性

  currentTime属性用于读取媒体的当前播放位置，也可以通过修改currentTime属性来修改当前播放位置。如果修改的位置上没有可用的媒体数据时，将抛出INVALID_STATE_ERR异常；如果修改的位置超出了浏览器在一次请求中可以请求的数据范围，将抛出INDEX_SIZE_ERR异常。

  startTime属性用来读取媒体播放的开始时间，通常为“0”。

  duration属性来读取媒体文件总的播放时间。

  played属性、paused属性和ended属性

  played属性返回一个TimeRanges对象，从该对象中可以读取媒体文件的已播放部分的时间段。开始时间为已播放部分的开始时间，结束时间为已播放部分的结束时间。

  paused属性返回一个布尔值，表示是否牌暂停播放中，true表示媒体暂停播放，false表示媒体正在播放。

  ended属性返回一个布尔值，表示是否播放完毕，true表示媒体播放完毕，false表示还没有播放完毕。

  三者均为只读属性。

  defaultPlaybackRate属性和playbackRate属性

  defaultPlaybackRate属性用来读取或修改媒体默认的播放速率。

  playbackRate属性用于读取或修改媒体当前的播放速率。

  volume属性和muted属性

  volume属性用于读取或修改媒体的播放音量，范围为“0”到“1”，“0”为静音，“1”为最大音量。

  muted属性用于读取或修改媒体的静音状态，该值为布尔值，true表示处于静音状态，false表示处于非静音状态。

video元素和audio元素的方法

• play()方法：使用该方法来播放媒体，自动将元素的paused属性值设置为false。
• pause()方法：使用该方法来暂停播放，自动将元素的paused属性值设置为true。
• load()方法：使用该方法来重新载入媒体进行播放，自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值，自动将元素的error的值变为null。
• canPlayType()方法：使用该方法来测试浏览器是否支持指定的媒体类型，该方法定义如下：
  var support = mediaElement.canPlayType(type);

mediaElement表示页面上的video或audio元素。该方法使用一个参数type，该参数的指定方法与source元素的type属性相同，都用播放文件的MIME类型来指定，可以在指定的字符串中加上表示媒体编码格式的codes参数。该方法返回三个可能的值：

• 空字符串：表示浏览器不支持此种媒体类型。
• maybe：表示浏览器可能支持此种媒体类型。
• probably：表示浏览器确定支持此种媒体类型。

媒体播放示例如下：

示例页面的HTML代码如下：

video元素和audio元素的事件

• loadstart事件：浏览器开始在网上寻找媒体数据。
• progress事件：浏览器正在获取媒体数据。
• suspend事件：浏览器暂停获取媒体数据，但是下载过程并没有正常结束。
• abort事件：浏览器在下载完全部媒体数据之前终止获取媒体数据，但是并不是由错误引起的。
• error事件：获取媒体数据过程中出错。
• emptied事件：video元素或audio元素所在网络突然变未初始化状态。（可能引起的原因有：1、载入媒体过程中突然发生了一个致使错误；2、在浏览器正在选择支持的播放格式时，又调用了load方法重新载入媒体。）
• stalled事件：浏览尝试获取媒体数据失败。
• play事件：即将开始播放，当执行了play()方法时触发，或数据下载后元素被设置为autoplay（自动播放属性）。
• pause事件：播放暂停，当执行了pause()方法时触发。
• loadedmetadata事件：浏览器获取完毕媒体的时间长和字节数。
• loadeddata事件：浏览器已加载完毕当前播放位置的媒体数据，准备播放。
• waiting事件：播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧。
• playing事件：正在播放。
• canplay事件：浏览器能播放媒体，但估计以当前播放速率不能直接将媒体播放完毕，播放期间需要缓冲。
• canplaythrough事件：浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲。
• seeking事件：seeking属性变为true，浏览器正在请求数据。
• seeked事件：seeking属性变为false，浏览器停止请求数据。
• timeupdate事件：当前播放位置被改变，可能是播放过程中的自然改变，也可能是被人为地改变，或由于播放不能连续而发生的跳变。
• ended事件：播放结束后停止播放。
• ratechange事件：defautplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变。
• durationchange事件：播放时长被改变。
• volumechange事件：volume属性（音量）被改变或muted属性（静音状态）被改变。