博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html 5 video 和audio属性
阅读量:5942 次
发布时间:2019-06-19

本文共 3629 字,大约阅读时间需要 12 分钟。

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>
poster
video
元素独有属性)和
loop
属性
poster
video
元素独有属性)    
     当视频不可用时,可以使用该元素向用户展示一幅替代用的图片。
当视频不可用时,最好使用poster属性,以免展示视频的区域中出现一
片空白。该属性的使用方法如下所示:
<video src="sample.mov" psoter="cannotuse.jpg"></video>
loop
属性
    用于指定是否循环播放视频或音频,其使用方法如下:
<video src="sample.mov" autoplay="autoplay" loop="loop"></video>
 
 
l
controls
属性、
wdith
属性和
height
属性(后两个
video
元素独有属性)
controls
属性
   指定是否为视频或音频添加浏览器自带的播放用的控制条。控制条中具
有播放、暂停等按钮。其使用方法如下:
<video src="sample.mov" controls="controls"></video>
width
属性与
height
属性(
video
元素独有属性)
    用于指定视频的宽度与高度(以像素为单位),使用方法如下:
<video src="sample.mov" width="500" height="500"></video
>
 
 
l
error
属性
    在读取、使用媒体数据的过程中,在正常情况下,该属性为null,但
是任何时候只要出现错误,该属性将返回一个MediaError对象,该对象
的code属性返回对应的错误状态码,其可能的值包括:
•MEDIA_ERR_ABORTED(数值1):媒体数据的下载过程由于用户的操作原因而被终止。
•MEDIA_ERR_NETWORK(数值2):确认媒体资源可用,但是在下载时出现网络错误,媒体数据的下载过程被终止。
•MEDIA_ERR_DECODE(数值3):确认媒体资源可用,但是解码时发生错误。
•MEDIA_ERR_SRC_NOT_SUPPORTED(数值4):媒体资源不可用媒体格式不被支持。
注意:
error
属性为只读属性。
 
l
networkState
属性
    该属性在媒体数据加载过程中读取当前网络的状态,其值包
括:
•NETWORK_EMPTY(数值0):元素处于初始状态。
•NETWORK_IDLE(数值1):浏览器已选择好用什么编码格式来播放媒体,但尚未建立网络连接。
•NETWORK_LOADING(数值2):媒体数据加载中。
•NETWORK_NO_SOURCE(数值3):没有支持的编码格式,不执行加载。
注意:
networkState
属性为只读属性
 
l
currentSrc
属性、
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
属性为只读属性
 
 
l
readyState
属性
     该属性返回媒体当前播放位置的就绪状态,其值包括:
•HAVE_NOTHING(数值0):没有获取到媒体的任何信息,当前播放位置
没有可播放数据。
•HAVE_METADATA(数值1):已经获取到了足够的媒体数据,但是当前播
放位置没有有效的媒体数据(也就是说,获取到的媒体数据无效,不能播放)。
•HAVE_CURRENT_DATA(数值2):当前播放位置已经有数据可以播放,
但没有获取到可以让播放器前进的数据。当媒体为视频时,意思是当前帧的数据
已获得,但还没有获取到下一帧的数据,或者当前帧已经是播放的最后一帧。
•HAVE_FUTURE_DATA(数值3):当前播放位置已经有数据可以播放,而
且也获取到了可以让播放器前进的数据。当媒体为视频时,意思是当前帧的数据
已获取,而且也获取到了下一帧的数据,当前帧是播放的最后一帧readyState
属性不可能为HAVE_FUTURE_DATA。
•HAVE_ENOUGH_DATA(数值4):当前播放位置已经有数据可以播放,
同时也获取到了可以让播放器前进的数据,而且浏览器确认媒体数据以某一种速
度进行加载,可以保证有足够的后续数据进行播放。
注意:
readyState
属性为只读属性。
l
seeking
属性和
seekable
属性
•seeking属性返回一个布尔值,表示浏览器是否正在请求某一
特定播放位置的数据,true表示浏览器正在请求数据,false表示浏览器
已停止请求。
•seekable属性返回一个TimeRanges对象,该对象表示请求到的数
据的时间范围。当媒体为视频时,开始时间为请求到视频数据第一帧的
时间,结束时间为请求到视频数据最后一帧的时间。
注意:这两个属性均为只读属性。
l
currentTime
属性、
startTime
属性和
duration
属性
•currentTime属性用于读取媒体的当前播放位置,也可以通过修改
currentTime属性来修改当前播放位置。如果修改的位置上没有可用的
媒体数据时,将抛出INVALID_STATE_ERR异常;如果修改的位置超
出了浏览器在一次请求中可以请求的数据范围,将抛出INDEX_SIZE_ERR
异常。
•startTime属性用来读取媒体播放的开始时间,通常为“0”。
•duration属性来读取媒体文件总的播放时间。
l
played
属性、
paused
属性和
ended
属性
•played属性返回一个TimeRanges对象,从该对象中可以读
取媒体文件的已播放部分的时间段。开始时间为已播放部分的开
始时间,结束时间为已播放部分的结束时间。
•paused属性返回一个布尔值,表示是否暂停播放,true表示
媒体暂停播放,false表示媒体正在播放。
•ended属性返回一个布尔值,表示是否播放完毕,true表示
媒体播放完毕,false表示还没有播放完毕。
注意:三者均为只读属性。
 
l
defaultPlaybackRate
属性和
playbackRate
属性
•defaultPlaybackRate属性用来读取或修改媒体默认的播放
速率。
•playbackRate属性用于读取或修改媒体当前的播放速率。
l
volume
属性和
muted
属性
•volume属性用于读取或修改媒体的播放音量,范围为“0”到
“1”,“0”为静音,“1”为最大音量。
•muted属性用于读取或修改媒体的静音状态,该值为布尔值
,true表示处于静音状态,false表示处于非静音状态。
 
 

转载于:https://www.cnblogs.com/sq45711478/p/5935438.html

你可能感兴趣的文章
LINQ to SQL活学活用(1):这要打破旧观念
查看>>
Spring boot 嵌入的tomcat不能启动: Unregistering JMX-exposed beans on shutdown
查看>>
【Windows】字符串处理
查看>>
Spring(十八):Spring AOP(二):通知(前置、后置、返回、异常、环绕)
查看>>
CentOS使用chkconfig增加开机服务提示service xxx does not support chkconfig的问题解决
查看>>
微服务+:服务契约治理
查看>>
save
查看>>
Android DrawLayout + ListView 的使用(一)
查看>>
clear session on close of browser jsp
查看>>
asp.net mvc Post上传文件大小限制 (转载)
查看>>
关于吃掉物理的二次聚合无法实现的需要之旁门左道实现法
查看>>
mysql出现unblock with 'mysqladmin flush-hosts'
查看>>
oracle exp/imp命令详解
查看>>
开发安全的 API 所需要核对的清单
查看>>
Mycat源码中的单例模式
查看>>
WPF Dispatcher介绍
查看>>
fiddler展示serverIP方法
查看>>
C语言中的随意跳转
查看>>
WPF中如何将ListViewItem双击事件绑定到Command
查看>>
《聚散两依依》
查看>>