
6.4 音频和视频中的属性
在HTML5网页中,关于音频和视频的属性非常多,本节将挑选几个常用的进行讲解。
6.4.1 autoplay 属性
autoplay属性设置与返回音频或视频是否在加载后立即开始播放。
设置autoplay属性的语法格式如下:
audio|video.autoplay=true|false
返回autoplay属性的语法格式如下:
audio|video.autoplay
其中,autoplay属性的取值包括true和false。
(1)true:设置音频或视频在加载后立即开始播放。
(2)false:默认值,设置音频或视频在加载后不立即开始播放。
【例6.6】(实例文件:ch06\6.6.html)

在IE 11.0中浏览效果如图6-10所示。单击【启动自动播放】按钮,然后单击【检查自动播放状态】按钮,即可看到此时autoplay属性为true。

图6-10 预览效果
6.4.2 buffered 属性
buffered属性返回TimeRanges对象。TimeRanges对象表示用户的音频或视频缓冲范围。缓冲范围指的是已缓冲音频或视频的时间范围。如果用户在音频或视频中跳跃播放,就会得到多个缓冲范围。
返回buffered属性的语法格式如下:
audio|video.buffered
【例6.7】(实例文件:ch06\6.7.html)

在IE 11.0中浏览效果如图6-11所示。视频播放一段后,单击【获得视频的第一段缓冲范围】按钮,即可看到此时视频的缓冲范围。

图6-11 预览效果
6.4.3 controls属性
controls属性设置或返回浏览器应当显示标准的音频或视频控件。标准的音频或视频控件包括播放、暂停、进度条、音量、全屏切换、字幕和轨道。
设置controls属性的语法格式如下:
audio|video.controls=true|false
返回controls属性的语法格式如下:
audio|video.controls
其中,controls属性的取值包括true和false。
(1)true:设置显示控件。
(2)false:默认值,设置不显示控件。
【例6.8】(实例文件:ch06\6.8.html)

在IE 11.0中浏览效果如图6-12所示。单击【启动控件】按钮,然后单击【检查控件状态】按钮,即可看到此时controls属性为true。

图6-12 预览效果
6.4.4 currentSrc属性
currentSrc属性返回当前音频或视频的URL。如果未设置音频或视频,则返回空字符串。
返回currentSrc属性的语法格式如下:
audio|video.currentSrc
【例6.9】(实例文件:ch06\6.9.html)

在IE 11.0中浏览效果如图6-13所示。单击【获得当前视频的URL】按钮,即可看到当前视频的URL路径。

图6-13 预览效果