Video对象的playbackRate属性和duration、ended属性介绍

html5知识学习之Video对象学习课程，Video对象的playbackRate属性设置或返回视频的当前播放速度；duration和ended两个属性为只读属性，duration返回当前视频的长度，以秒计；ended属性返回视频是否已结束；下面让我们通过kphp框架学习网站来给大家详细介绍一下Video的这三个属性。

(8)playbackRate 属性
playbackRate 属性设置或返回视频的当前播放速度。
浏览器支持情况：
所有主流浏览器都支持 playbackRate 属性
注意： Internet Explorer 9 及更早IE版本不支持 playbackRate 属性。
语法：
返回 playbackRate 属性：videoObject.playbackRate
设置 playbackRate 属性：videoObject.playbackRate=playbackspeed
属性值：playbackspeed
指示视频的当前播放速度。
例值：
1.0 正常速度
0.5 半速（更慢）
2.0 倍速（更快）
-1.0 向后，正常速度
-0.5 向后，半速

事例源代码：

<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><br/>
<input onClick="setPlaySpeed()" type="button" value="快进">
<script language="javascript" type="text/javascript">
var v = document.getElementById("myVideo");
function setPlaySpeed()
{ 
  v.playbackRate = 5;
}   
</script>

事例运行结果：
playbackRate 属性事例运行

(9)duration 属性
duration属性返回当前视频的长度，以秒计。
注意： 不同的浏览器返回的值有些差值，相差值在0.01秒-0.1秒之间。
注意： 该属性为只读属性。
浏览器支持情况：
所有主流浏览器都支持 duration 属性
语法：
videoObject.duration

事例源代码：

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><br/>
<p id="message"></p>
<button onclick="getDuration()">测试</button>
<script>
function getDuration()
{
var v = document.getElementById("myVideo").duration;
document.getElementById("message").innerHTML = v;
}
</script>

事例运行结果：
duration属性事例运行

(10)ended 属性
ended属性返回视频是否已结束。
如果播放位置位于视频的结尾时，则音频/视频已结束。
注意： 该属性为只读。
语法：
videoObject.ended
返回值：布尔值
如果播放已结束，则返回 true。否则返回 false。

事例源代码：

<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><br/>
<p id="message" ></p>
<button onClick="getended()">测试</button>
<script>
function getended()
{
var v = document.getElementById("myVideo").ended;
document.getElementById("message").innerHTML = v;
}
</script>

事例运行结果：
ended属性事例运行

以上是html5知识学习之Video对象的属性playbackRate，duration，ended用法讲解，希望对你的Video学习有帮助.
原文来自kphp框架，转载请注明出处：http://www.kphp.org/?faq-show-61.html