html5知识学习之Video对象的属性autoplay，buffered，controls用法讲解

Video对象的属性大约有30多个，但是有很多是不支持主流浏览器，对于我们来说可以暂时不去学习，我会讲一下支持主流浏览器的属性给大家，今天讲在kphp框架网站中分享video对象的属性autoplay，buffered，controls的基础知识和一些用法。

(1)autoplay 属性

设置或返回音视频是否在加载后即开始播放。该属性反映了 HTML autoplay 属性。当存在时，它指定在视频一旦加载后视频会自动开始播放 。

videoObject.autoplay=true|false

eg:

var Vobject = document.getElementById(“myVideo”);

Vobject.autoplay = true;

Vobject.load();

事例源代码：

<p style="color:#CC6600">功能介绍：<br/>点击测试按钮看是否在准备就绪后就开始播放视频。</p>
<video id="myVideo" width="320" height="180" controls autoplay>
<source src="http://www.kphp.org/html5/kphp.mp4" type="video/mp4">
<source src="http://www.kphp.org/html5/kphp.ogv" type="video/ogg">
kphp框架提醒您：您的浏览器不支持 video 标签。
</video>
<p id="message"></p>
<button onClick="kphpFunction()">测试</button>
<script>
function kphpFunction()
{
var v = document.getElementById("myVideo").autoplay;
document.getElementById("message").innerHTML = v;
}
</script>

事例运行结果：

autoplay属性事例运行

(2)buffered 属性

返回 TimeRanges 对象，TimeRanges 对象表示用户的音视频缓冲范围，缓冲范围指的是已缓冲音视频的时间范围，如果用户在音视频中跳跃播放，会得到多个缓冲范围。

注意：该属性是只读的。

TimeRanges 对象属性：

length - 获得音视频中已缓冲范围的数量

start(index) - 获得某个已缓冲范围的开始位置

end(index) - 获得某个已缓冲范围的结束位置

注意：首个缓冲范围的下表是0。

事例源代码：

<p style="color:#CC6600">功能介绍：<br/>点击测试按钮获得缓冲的开始时间和结束时间值，以秒为单位</p>
<video id="myVideo" width="320" height="180" controls>
<source src="http://www.kphp.org/html5/kphp.mp4" type="video/mp4">
<source src="http://www.kphp.org/html5/kphp.ogv" type="video/ogg">
kphp框架提醒您：您的浏览器不支持 video 标签。
</video>
<p id="message"></p>
<button onClick="mybuffered()">测试</button>
<script language="javascript" type="text/javascript">
function mybuffered()
{
var v = document.getElementById("myVideo");
document.getElementById("message").innerHTML = "Start: " + v.buffered.start(0) + " End: " + v.buffered.end(0);
}
</script>

事例运行结果：

buffered属性事例运行

(3)controls 属性

设置或返回浏览器应当显示标准的视频控件。该属性反映了 controls 属性。

当使用该属性时，它指定了显示视频控件。

视频控件包含：播放，暂停，进度条，音量，全屏切换（供视频），字幕（当可用时），轨道（当可用时）

返回 controls 属性：videoObject.controls

设置 controls 属性：videoObject.controls=true|false

true - 指定显示控件，false - 默认。指定不显示控件

事例源代码：

<p style="c
4000
olor:#CC6600">功能介绍：<br/>鼠标经过视频显示视频控件，鼠标移开视频控件消失，点击查看控件状态，则显示Controls属性的状态</p>
<video id="myVideo" width="320" height="180" onmouseover="enableControls();" onmouseout="disableControls();">
<source src="http://www.kphp.org/html5/kphp.mp4" type="video/mp4">
<source src="http://www.kphp.org/html5/kphp.ogv" type="video/ogg">
kphp框架提醒您：您的浏览器不支持 video 标签。
</video><br>
<input onClick="checkControls()" type="button" value="查看控件状态">
<script language="javascript" type="text/javascript">
var v = document.getElementById("myVideo");
function enableControls()
{
v.controls = true;
v.load();
}
function disableControls()
{
v.controls = false;
v.load();
}
function checkControls()
{
alert(v.controls);
}
</script>

事例运行结果：

controls属性事例运行

以上是html5知识学习之Video对象的属autoplay，buffered，controls用法讲解，希望对你的Video学习有帮助.

原文来自kphp框架，转载请注明出处：http://www.kphp.org/?faq-show-59.html