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

本文介绍了HTML5中Video对象的playbackRate、duration和ended三个属性的使用方法。包括如何设置播放速度、获取视频长度及判断视频是否播放结束。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值