音频和视频元素的属性
这两种元素所具有的属性大致相同,介绍如下:
src属性和autoplay属性
src属性用于指定媒体数据的URL地址。
autoplay属性用于指定媒体是否在页面加载后是否自动播放,使用方法如下:
<video src="sample.mov" autoplay="autoplay"></video>
perload属性
该属性用于指定视频或音频数据是否预加载。如果使用预加载,则浏览器会预先将视频或音频数据进行缓冲,这样可以加快播放速度,因为播放时数据已经预先缓冲完毕。该属性有三个可选值,分别是“none”、“metadata”和“auto”,其默认值为“auto”。
- none值表示不进行预加载;
- metadata表示只预加载媒体的元数据(媒体字节数、第一帧、播放列表、持续时间等)。
- auto表示预加载全部视频或音频。
<video src="sample.mov" preload="auto"></video>
poster(video元素独有属性)和loop属性
当视频不可用时,可以使用该元素向用户展示一幅替代用的图片。当视频不可用时,最好使用poster属性,以免展示视频的区域中出现一片空白。该属性的使用方法如下:
<video src="sample.mov" psoter="cannotuse.jpg"></video>
loop属性用于指定是否循环播放视频或音频,其使用方法如下:
<video src="sample.mov" autoplay="autoplay" loop="loop"></video>
controls属性、wdith属性和height属性(后两个video元素独有)
在该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具有播放、暂停等按钮。其使用方法如下:
<video src="sample.mov" controls="controls"></video>
开发者也可以在脚本中自定义控制条,而不使用浏览器默认的。
width属性与height属性用于指定视频的宽度与高度(以像素为单位),使用方法如下:
<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属性为只读属性,示例如下:
$(function() { $("audio").bind("error", function(event) { var error = event.target.error; switch(error.code) { case 1:$("#console").prepend("<span>视频或音频的下载过程被终止。</span><br/>"); break; case 2:$("#console").prepend("<span>网络发生故障,视频或音频的下载过程被终止。</span><br/>"); break; case 3:$("#console").prepend("<span>解码失败。</span><br/>"); break; case 4:$("#console").prepend("<span>不支持的视频或音频格式。</span><br/>"); break; } }); });
networkState属性
该属性在媒体数据加载过程中读取当前网络的状态,其值包括:
- NETWORK_EMPTY(数值0):元素处于初始状态。
- NETWORK_IDLE(数值1):浏览器已选择好用什么编码格式来播放媒体,但尚未建立网络连接。
- NETWORK_LOADING(数值2):媒体数据加载中。
- NETWORK_NO_SOURCE(数值3):没有支持的编码格式,不执行加载。
networkState属性为只读属性,使用示例如下:
$(function() { $("video").bind("progress",function(event) { var state = event.target.networkState; switch(state) { case 0: $("#console").prepend("<span>正在进行初始化。</span><br/>"); break; case 1: $("#console").prepend("<span>已选择好编码格式,尚未建立网络连接。</span><br/>"); break; case 2: $("#console").prepend("<span>加载中...</span><br/>"); break; case 3: $("#console").prepend("<span>加载失败。</span><br/>"); break; } }); });
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表示处于非静音状态。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1705绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1113UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1326绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1720选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1435使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1533canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1508CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5440Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4667基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4141基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 2017基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1875applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1566离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2597本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1621Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1247video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 956video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4961在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 5035在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
基于HTML5的多媒体播放网站_郑培纯
基于 HTML5 的多媒体播放网站 在互联网技术的不断发展下,多媒体播放网站已经成为了人们获取娱乐、学习、新闻等方面的重要途径之一。基于 HTML5 技术构建的多媒体播放网站,可以提供更加优质的播放体验,同时也可以...
这个“多功能HTML5多媒体视频播放js特效代码.rar”压缩包包含了一组JavaScript代码,用于实现高级的HTML5视频播放器功能,如点播和缓冲。让我们深入探讨一下这些知识点。 首先,HTML5的 `<video>` 标签是实现视频...
HTML5是Web开发中的一个重要里程碑,它引入了许多新特性,其中多媒体标签的使用极大地丰富了网页内容的表现形式。本篇文章将深入探讨HTML5中的多媒体标签,包括音频和视频的处理,以及其他一些相关多媒体标签。 ...
首先,我们来看`<audio>`标签。这个标签用于在网页上嵌入...通过这些实践,你可以深入理解HTML5多媒体的使用,提高网页开发技能。同时,注意兼容不同浏览器的行为,因为并非所有浏览器都完全支持HTML5的所有特性。
本实验验证了HTML5多媒体技术的强大功能,我们可以使用HTML5的音频和视频标签来实现复杂的多媒体播放功能。通过本实验,我们可以更好地了解HTML5多媒体技术的应用和实现方法。 七、相关知识点 * HTML5音频标签 `...
HTML5是一种强大的网页开发技术,它提供了许多增强用户体验的功能,包括多媒体元素的处理。然而,HTML5原生并不支持RTSP(Real Time Streaming Protocol)视频流的播放,这是专为实时音视频传输设计的一种协议。为了...
Plyr 是一个使用 HTML5 开发的基于浏览器上的多媒体播放器。支持自定义的播放控制和 WebVTT 字幕。特性:可访问性 - 完全支持字幕和屏幕阅读器轻量级 - 压缩后只有 4.8Kb可定制 - 外观可以根据需要进行调整语义化 -...
HTML5提供的多媒体处理能力是非常强大的。你可以采用、元素在页面上直接播放音视频,这是最简单的用法;你还可以采用MediaDevices和MediaStream等几个接口录制多媒体,或编辑媒体流,这是比较高级的用法;最高级的...
#### 一、网页多媒体的崛起与意义 随着互联网技术的飞速发展,网页已经从最初的纯文本形式进化到包含丰富的多媒体元素,...在未来,随着HTML5标准的普及和多媒体技术的不断进步,网页多媒体的应用将更加广泛和深入。
#### HTML5多媒体标签介绍 HTML5引入了两个非常重要的多媒体标签:`<video>`和`<audio>`。这两个标签的出现极大地简化了开发者在网页中嵌入音频和视频文件的操作流程,无需依赖任何第三方插件(如Flash),就能实现...
这个"HTML5多媒体开发指南源代码"压缩包很可能是为了帮助开发者深入理解并实践HTML5中的多媒体元素和特性。 在HTML5中,多媒体主要包括音频、视频、图像以及canvas等元素,它们使得网页可以更生动、更富交互性。...
HTML5的引入极大地增强了HTML在多媒体方面的处理能力,使得开发者无需依赖浏览器插件即可实现丰富的媒体体验。 首先,HTML中处理多媒体的主要标签是`<object>`和`<embed>`。`<embed>`元素在HTML5中被正式标准化,它...
其中,HTML5的多媒体支持是其一大亮点,而M3U8(HLS,HTTP Live Streaming)则是苹果公司提出的一种流媒体传输协议,特别适用于网络带宽不稳定的情况。在本文中,我们将深入探讨如何使用HTML5来播放M3U8格式的视频,...
HTML5的多媒体元素包括`<audio>`和`<video>`,它们为开发者提供了丰富的功能,如播放、暂停、快进、快退、音量控制等,同时也支持自定义用户界面。 在HTML5播放器中,核心部分是通过JavaScript来实现交互逻辑,以及...
HTML5 Media是一个重要的技术,它使得网页可以内嵌多媒体内容,如音频和视频。在HTML5之前,网页上的媒体播放通常依赖于插件,如Adobe Flash。然而,随着HTML5的普及,浏览器开始内置对HTML5 Media的支持,使得...
总结,"jquery多媒体播放插件"的实现涉及到HTML5多媒体元素的使用,结合jQuery进行事件处理、属性操作和用户界面设计。通过上述步骤,我们可以创建一个功能完备、交互友好的多媒体播放器,适用于各种Web应用。在实际...
这些特性使得HTML5成为构建现代网页的理想选择,特别是对于包含多媒体内容的网站,如在线视频平台。 2. **响应式设计**: 响应式设计是指网站可以根据访问设备的屏幕尺寸和方向自动调整布局、图片大小和功能。这...
在HTML5中,多媒体元素的使用得到了显著提升,使得网页可以更加丰富地展示视频和音频内容。HTML5引入了新的标签如`<audio>`和`<video>`,以原生支持多媒体,不再需要依赖Flash这样的插件。接下来,我们将详细讨论...