html 5 video 和audio属性

src属性和autoplay属性

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

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

<video src="sample.mov" autoplay="autoplay"></video>

perload属性

该属性用于指定视频或音频数据是否预加载。如果使用预加载,则浏览器会预先将视频

或音频数据进行缓冲,这样可以加快播放速度,因为播放时数据已经预先缓冲完毕。该属

性有三个可选值,分别是“none”、“metadata”和“auto”,其默认值为“auto”。

none值表示不进行预加载;

metadata表示只预加载媒体的元数据(媒体字节数、第一帧、播放列表、持续时间等)。

auto表示预加载全部视频或音频。

perload属性的使用方法如下所示。

<video src="sample.mov" preload="auto"></video>

postervideo元素独有属性)和loop属性

postervideo元素独有属性)

当视频不可用时,可以使用该元素向用户展示一幅替代用的图片。

当视频不可用时,最好使用poster属性,以免展示视频的区域中出现一

片空白。该属性的使用方法如下所示:

<video src="sample.mov" psoter="cannotuse.jpg"></video>

loop属性

用于指定是否循环播放视频或音频,其使用方法如下:

<video src="sample.mov" autoplay="autoplay" loop="loop"></video>

lcontrols属性、wdith属性和height属性(后两个video元素独有属性)

controls属性

指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具

有播放、暂停等按钮。其使用方法如下:

<video src="sample.mov" controls="controls"></video>

width属性与height属性( video元素独有属性)

用于指定视频的宽度与高度(以像素为单位),使用方法如下:

<video src="sample.mov" width="500" height="500"></video>

lerror属性

在读取、使用媒体数据的过程中,在正常情况下,该属性为null,但

是任何时候只要出现错误,该属性将返回一个MediaError对象,该对象

的code属性返回对应的错误状态码,其可能的值包括:

•MEDIA_ERR_ABORTED(数值1):媒体数据的下载过程由于用户的操作原因而被终止。

•MEDIA_ERR_NETWORK(数值2):确认媒体资源可用,但是在下载时出现网络错误,媒体数据的下载过程被终止。

•MEDIA_ERR_DECODE(数值3):确认媒体资源可用,但是解码时发生错误。

•MEDIA_ERR_SRC_NOT_SUPPORTED(数值4):媒体资源不可用媒体格式不被支持。

注意:error属性为只读属性。

lnetworkState属性

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

括:

•NETWORK_EMPTY(数值0):元素处于初始状态。

•NETWORK_IDLE(数值1):浏览器已选择好用什么编码格式来播放媒体,但尚未建立网络连接。

•NETWORK_LOADING(数值2):媒体数据加载中。

•NETWORK_NO_SOURCE(数值3):没有支持的编码格式,不执行加载。

注意:networkState属性为只读属性

lcurrentSrc属性、buffered属性

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

属性。

•buffered属性返回一个实现TimeRanges接口的对象,以确认浏览器是否已

缓存媒体数据。

TimeRanges对象的作用:TimeRanges对象表示一段时间范围,在大多数情况下,该对

象表示的时间范围是一个单一的以“0”开始的范围,但是如果浏览器发出Range Rquest请

求,这时TimeRanges对象表示的时间范围是多个时间范围。

TimeRanges对象的属性:该对象具有一个length属性,表示有多少个时间范围,多数情

况下存在时间范围时,该值为“1”;不存在时间范围时,该值为“0”,

TimeRanges对象有两个方法:start(index)和end(index),多数情况下将index设置为

“0”就可以了。当用element.buffered语句来实现TimeRanges接口时,start(0)表示当前

缓存区内从媒体数据的什么时间开始进行缓存,end(0)表示当前缓存区内的结束时间。

注意: buffered属性为只读属性

lreadyState属性

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

•HAVE_NOTHING(数值0):没有获取到媒体的任何信息,当前播放位置

没有可播放数据。

•HAVE_METADATA(数值1):已经获取到了足够的媒体数据,但是当前播

放位置没有有效的媒体数据(也就是说,获取到的媒体数据无效,不能播放)。

•HAVE_CURRENT_DATA(数值2):当前播放位置已经有数据可以播放,

但没有获取到可以让播放器前进的数据。当媒体为视频时,意思是当前帧的数据

已获得,但还没有获取到下一帧的数据,或者当前帧已经是播放的最后一帧。

•HAVE_FUTURE_DATA(数值3):当前播放位置已经有数据可以播放,而

且也获取到了可以让播放器前进的数据。当媒体为视频时,意思是当前帧的数据

已获取,而且也获取到了下一帧的数据,当前帧是播放的最后一帧readyState

属性不可能为HAVE_FUTURE_DATA。

•HAVE_ENOUGH_DATA(数值4):当前播放位置已经有数据可以播放,

同时也获取到了可以让播放器前进的数据,而且浏览器确认媒体数据以某一种速

度进行加载,可以保证有足够的后续数据进行播放。

注意:readyState属性为只读属性。

lseeking属性和seekable属性

•seeking属性返回一个布尔值,表示浏览器是否正在请求某一

特定播放位置的数据,true表示浏览器正在请求数据,false表示浏览器

已停止请求。

•seekable属性返回一个TimeRanges对象,该对象表示请求到的数

据的时间范围。当媒体为视频时,开始时间为请求到视频数据第一帧的

时间,结束时间为请求到视频数据最后一帧的时间。

注意:这两个属性均为只读属性。

lcurrentTime属性、startTime属性和duration属性

•currentTime属性用于读取媒体的当前播放位置,也可以通过修改

currentTime属性来修改当前播放位置。如果修改的位置上没有可用的

媒体数据时,将抛出INVALID_STATE_ERR异常;如果修改的位置超

出了浏览器在一次请求中可以请求的数据范围,将抛出INDEX_SIZE_ERR

异常。

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

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

lplayed属性、paused属性和ended属性

•played属性返回一个TimeRanges对象,从该对象中可以读

取媒体文件的已播放部分的时间段。开始时间为已播放部分的开

始时间,结束时间为已播放部分的结束时间。

•paused属性返回一个布尔值,表示是否暂停播放,true表示

媒体暂停播放,false表示媒体正在播放。

•ended属性返回一个布尔值,表示是否播放完毕,true表示

媒体播放完毕,false表示还没有播放完毕。

注意:三者均为只读属性。

ldefaultPlaybackRate属性和playbackRate属性

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

速率。

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

lvolume属性和muted属性

•volume属性用于读取或修改媒体的播放音量,范围为“0”到

“1”,“0”为静音,“1”为最大音量。

•muted属性用于读取或修改媒体的静音状态,该值为布尔值

,true表示处于静音状态,false表示处于非静音状态。

 

时间: 2024-08-26 17:35:19

html 5 video 和audio属性的相关文章

HTML5中Video和Audio

相关属性 src属性 该属性指定媒体数据的URL地址. autoplay属性 在该属性中指定是否在页面加载后自动播放,使用方法: <video src="test.mov" autoplay></video> preload属性 在该属性中指定视频或音频数据是否预加载.如果使用预加载的话,浏览器会预先将视频或音频进行缓冲,这样可以加快播放的速度,因为播放时数据已经预先缓冲完毕. 该性情有三个可选值:none,metadata与auto,默认值为auto. non

video 与 audio

Play方法:使用play方法来播放媒体,自动将元素的paused属性的值变为false.Pause方法:使用pause方法来暂停播放,自动将元素的paused属性的值变为true.Load方法:使用load方法来重新载入媒体进行播放,自动将元素的playbackRate属性值变为defaultPlaybackRate 属性的值,自动将元素的error值变为null.canPlayType方法:使用canPlayType方法来测试浏览器是否支持指定的媒体类型video 和 audio 与sour

HTML5 Video标签的属性、方法和事件汇总介绍

<video>标签的属性 代码如下: src :视频的属性poster:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高度 html 代码 代码如下: <video id="media" src="http://www.jb51.net/test.mp4" controls width="400px" he

HTML5的Video标签的属性,方法和事件汇总

<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度 height:视频高度 html 代码 <video id="media" src="http://www.sundxs.com/test.mp4" controls width="400px" heigt

H5新特性:video与audio的使用

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素. ·首先带大家熟悉一下video标签的属性方法,根据属性方法做一个小demo, HTML5支持的视频格式: Ogg 带有Theora视频编码+Vorbis音频编码的Ogg文件 支持的浏览器:F.C.O MEPG4  带有H.264视频编码+AAC音频编码的MPEG4文

video与audio的使用

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素. ·首先带大家熟悉一下video标签的属性方法,根据属性方法做一个小demo, HTML5支持的视频格式: Ogg 带有Theora视频编码+Vorbis音频编码的Ogg文件 支持的浏览器:F.C.O MEPG4  带有H.264视频编码+AAC音频编码的MPEG4文

&lt;video&gt;和&lt;audio&gt;标签

一.<video>基本格式: <video width=" " heigh="" src=""> </video> 二.<video>支持的格式:一般为mp3 和 mp4 三.source标签用法 作用:source标签可以链接不同的视频文件,浏览器将使用第一个可识别的格式,内容为source标签失效时的提醒 <video width="320" height="

解决ie8下,不支持video、audio的问题

video.audio都是html5的属性,不支持低版本的ie8,个人在用的时候,遇到了这个问题,下面是自己的解决方案 <audio controls="controls" preload="none" src="@SiteUrls.Instance().AttachmentAudioUrl(Model)"> <embed src="@SiteUrls.Instance().AttachmentAudioUrl(Mod

html5新媒体播放器标签video、audio 与embed、object

html5里的一些新的标签,看到里面object.embed.video.audio都可以添加视频或音频文件 embed是针对非IE的浏览器的媒体播放器 video是html5出的一种新标准,但并不是所有的浏览器都支持.video虽然号称可以支持三种媒体类型,但常用的只有mp4. 像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本上一样的, 1. video.audio可以看我的另一篇文章https://www.cnblogs.com/jing-tian/p/10930