HTML5 多媒体播放

2016年06月07日 HTML, javascript 暂无评论 阅读 28 views 次

video与audio元素基础

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

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

Html代码  收藏代码
  1. <audio src="demo/test.mp3">
  2.     您的浏览器不支持audio元素!
  3. </audio>

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

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

Html代码  收藏代码
  1. <video width="640" height="360" src="demo/test.mp4">
  2.     您的浏览器不支持video元素!
  3. </video>

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

Html代码  收藏代码
  1. <video width="640" height="360">
  2.     <!-- 在Ogg theora格式、Quicktime格式与MP4格式之间选择自己支持的播放格式。 -->
  3.     <source src="demo/sample.ogv" type="video/ogg; codecs='theora, vorbis'"/>
  4.     <source src="demo/sample.mov" type="video/quicktime"/>
  5. </video>

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

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

perload属性

该属性用于指定视频或音频数据是否预加载。如果使用预加载,则浏览器会预先将视频或音频数据进行缓冲,这样可以加快播放速度,因为播放时数据已经预先缓冲完毕。该属性有三个可选值,分别是“none”、“metadata”和“auto”,其默认值为“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属性返回对应的错误状态码,其可能的值包括:

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属性

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

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属性

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

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元素的方法

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

媒体播放示例如下:

Js代码  收藏代码
  1. $(function() {
  2.     $("video").bind("ended"function(event) {
  3.         alert("播放结束。");
  4.     }).bind("error"function(event) {
  5.         swithc(event.target.code) {
  6.             case MediaError.MEDIA_ERROR_ABORTED:
  7.                 alert("视频的下载过程被终止。");
  8.                 break;
  9.             case MediaError.MEDIA_ERROR_NETWORK:
  10.                 alert("网络发生故障,视频的下载过程被终止。");
  11.                 break;
  12.             case MediaError.MEDIA_ERROR_DECODE:
  13.                 alert("解码失败。");
  14.                 break;
  15.             case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
  16.                 alert("不支持播放的视频格式。");
  17.                 break;
  18.             default:
  19.                 alert("发生未知错误。");
  20.         }
  21.     });
  22.     $("#playBtn").click(function(event) { $("video")[0].play(); });
  23.     $("#pauseBtn").click(function(event) { $("video")[0].pause(); });
  24. });

示例页面的HTML代码如下:

Html代码  收藏代码
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <title>媒体播放示例</title>
  6.     <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
  7.     <script type="text/javascript" src="../js/media.js"></script>
  8. </head>
  9. <body>
  10.     <figure>
  11.         <figcaption>媒体播放</figcaption>
  12.         <video src="test.ogv"></video>
  13.     </figure>
  14.     <button type="button" id="playBtn">播放</button>
  15.     <button type="button" id="pauseBtn">暂停</button>
  16. </body>
  17. </html>

video元素和audio元素的事件

给我留言

您必须 登录 才能发表留言!