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="color:#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