HTML5多媒体API的属性

课后整理 2020-12-7

audio和video元素拥有相同的脚本属性,下面对这些属性进行简单介绍。

autobuffer属性

可读写属性。使用该属性可以使得audio或video元素实现自动缓冲,默认值为false,即audio或video元素默认情况下并不自动缓冲。如果值为true,则自动缓冲,但并不播放。如果使用了autoplay属性,则autobuffer属性会被忽略。其用法见下面的示例。

<audio  controls="controls" autobuffer="true">
    <source  src="samplesong.ogg" type="audio/ogg">
    <source  src="samplesong.mp3" type="audio/mpeg">

您的浏览器不支持audio标签。

</audio>

autoplay属性

可读写属性。使用该属性可以实现页面加载后音频一旦就绪即开始自动播放。使用autoplay属性相比使用脚本控制音频或视频播放来得简便,其值也可以设置为true或false。如果值为true或autoplay,则当音频或视频缓冲到足够多时即开始播放。其用法见下面的示例。

<audio  controls="controls" autoplay="autoplay">
    <source  src="samplesong.ogg" type="audio/ogg">
    <source  src="samplesong.mp3" type="audio/mpeg">

您的浏览器不支持audio标签。

</audio>

buffered属性

只读属性,用于返回一个TimeRanges对象,确认浏览器已经缓存媒体文件。

controls属性

可读写属性。该属性为布尔值,可以为媒体文件提供用于播放的控制条,包含播放、暂停、定位、时间显示、音量控制、全屏切换等常用控件,其用法如下。在将来的标准中,有望在播放控件中看到字幕和音轨。开发人员如果不希望使用浏览器默认的控制条,也可以使用脚本来自定义控制条。其用法见下面的示例。

<audio  controls="controls">
    <source  src="samplesong.ogg" type="audio/ogg">
    <source  src="samplesong.mp3" type="audio/mpeg">

您的浏览器不支持audio标签。

</audio>

currentSrc属性

只读属性,无默认值。用于返回媒体数据的URL地址,如果媒体URL地址未指定,则返回一个空字符串。

currentTime属性

可读写属性,无默认值。用于获取或设置当前播放位置,返回值为时间,单位为秒。

defaultPlaybackRate

可读写属性,无默认值。获取或设置当前播放速率,前提是用户没有使用快进或快退控件。

duration属性

只读属性,无默认值。用于获取当前媒体的持续时间,返回值为时间,单位为秒。

ended属性

只读属性,无默认值。用于返回一个布尔值,以获悉媒体是否播放结束。

error属性

只读属性,无默认值。用于返回一个MediaError对象以表明当前的错误状态,如果没有出现错误,则返回null。错误状态共有4个可能值,分别为:

initialTime属性

只读属性,无默认值。用于获取最早的可用于回放的位置,返回值为时间,单位为秒。

loop属性

可读写属性。获取或设置当媒体文件播放结束时是否重新开始播放。使用方法如下所示。

<audio  controls="controls" loop=”loop”>
    <source  src="samplesong.mp3" type="audio/mpeg">

您的浏览器不支持audio标签。

</audio>

muted属性

可读写属性,无默认值。muted属性为布尔值,用于获取或设置当前媒体播放是否开启静音,true为开启静音,false为未开启静音。如果对其赋值,则可以设置播放时是否静音。

networkState属性

只读属性。用于返回媒体的网络状态,共有4个可能值。

paused属性

只读属性,无默认值。用于返回一个布尔值,表示媒体是否暂停播放,true表示暂停,flase表示正在播放。

playbackRate属性

可读写属性,无默认值。用于读取或设置媒体资源播放的当前速率。

played属性

只读属性,无默认值。用于返回一个TimeRanges对象,标明媒体资源在浏览器中已播放的时间范围。TimeRanges对象的length属性为已播放部分的时间段,该对象有两个方法,end方法用于返回已播放时间段的结束时间,start方法用于返回已播放时间段的开始时间,其用法见下面的示例。

var ranges =  document.getElementById('myVideo').played;
for (var i=0;  i<ranges.length; i++)
    var start = ranges.start(i);
    var end = ranges.end(i);
     alert("从" + start +”开始播放到" + end+”结束。”);
}

preload属性

可读写属性,无默认值。用于定义视频是否预加载,该属性有3个可选值:none、metadata和auto。如果不用该属性,则默认为auto,分别介绍如下。

preload属性的用法如下所示。

<video src=”samplemovie.mp4”  preload=”auto”>
</video>

readyState属性

只读属性,无默认值。用于返回媒体当前播放位置的就绪状态,共有以下5个可能值。

seekable属性

只读属性,无默认值。返回一个TimeRanges对象,表明可以对当前媒体资源进行请求。

seeking属性

只读属性,无默认值。用于返回一个布尔值,表示浏览器是否正在请求某一播放位置的媒体数据,ture表示浏览器正在请求数据,而false表示浏览器已经停止请求数据。

src属性

可读写属性,无默认值。用于指定媒体资源的URL地址,与<img>标签类似,可与poster属性连用。poster属性用于指定一张替换图片,如果当前媒体数据无效,则显示该图片。其用法如下所示。

<video src=”http://www.lidongbo.com/samplemovie.mp4”  poster=” http://www.lidongbo.com/samplemovie.png”>
</video>

volume属性

可读写属性,无默认值。用于获取或设置媒体资源的播放音量,范围从0.0~1.0,0.0为静音,1.0为最大音量。注意音量大小并非是线性变化的,如果同时使用了muted属性,则此属性会被忽略。