文档章节

[HTML5]HTML5视频video时间事件代码

oO雨的印记Oo
 oO雨的印记Oo
发布于 2017/05/03 10:55
字数 181
阅读 22
收藏 0

使用 onloadedmetadata 事件获取视频的时间长度,使用 ontimeupdate 事件获取视频当前播放的进度,示例代码如下

1、获取视频时间长度

当视频载入video后,使用 onloadedmetadata 事件获取视频的时间长度。

代码如下:(下面的video为标签的id)

video.onloadedmetadata = function () { 
var vLength = video.duration; 
console.log(vLength); 
}

2、当前视频的播放进度

当视频开始播放时,可以使用 ontimeupdate 事件获取视频当前播放的进度。当video对象的 currentTime 属性发生改变时触发 ontimeupdate 事件。currentTime 属性是浮点小数,可取到 12 位数的小数位数。

代码如下:

video.ontimeupdate = function () { 
var vTime = video.currentTime; 
console.log(vTime); 
};

© 著作权归作者所有

共有 人打赏支持
oO雨的印记Oo
粉丝 2
博文 74
码字总数 15383
作品 0
济南
高级程序员
私信 提问
最好的 6 个 HTML5 的多媒体播放器

是 HTML5 中新引入的标签,用来在 Web 网页中嵌入视频播放功能,无需 Flash 和其他嵌入式插件的支持,是浏览器内建的功能,不过 旨在一些高级浏览器中支持,例如 Firefox, Safari, Chrome, a...

红薯
2011/11/27
9.3K
9
分享10款最棒的免费HTML5视频播放器

日期:2011/12/16 来源:GBin1.com 最近Web圈子里最让人激动地莫过于HTML5了,特别是HTML5视频,使用HTML5视频标签可以帮助我们解决困扰我们很长时间的网站视频插入问题。 HTML5可以在没有f...

gbin1
2011/12/21
2.1K
2
HTML5 面试中最常问到的 10 个问题

1. HTML5 新的 DocType 和 Charset 是什么? HTML5 现在已经不是 SGML 的子集,DocType 简化为: HTML 5 指定 UTF-8 编码的方式如下: 2. 如何在 HTML5 页面中嵌入音频? HTML 5 包含嵌入音频...

oschina
2013/10/11
12.1K
17
HTML5:实至名归还是言过其实?

庶几何时,HTML5 开始吸引越来越多的人的目光,尽管 W3C 表示,它的最终成熟还有很长的路,然而并不能阻止人们对它的期待。2007年,HTML5 向 W3C 标准进军,HTML5 的使命是实现富 Web 应用的...

红薯
2010/05/01
1K
3
现在就开始使用 HTML5 的十大原因

日期:2011/12/05 来源:GBin1.com 你 难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。HTML5是w...

gbin1
2011/12/07
4.1K
31

没有更多内容

加载失败,请刷新页面

加载更多

RestClientUtil和ConfigRestClientUtil区别说明

RestClientUtil directly executes the DSL defined in the code. ConfigRestClientUtil gets the DSL defined in the configuration file by the DSL name and executes it. RestClientUtil......

bboss
今天
12
0

中国龙-扬科
昨天
2
0
Linux系统设置全局的默认网络代理

更改全局配置文件/etc/profile all_proxy="all_proxy=socks://rahowviahva.ml:80/"ftp_proxy="ftp_proxy=http://rahowviahva.ml:80/"http_proxy="http_proxy=http://rahowviahva.ml:80/"......

临江仙卜算子
昨天
9
0
java框架学习日志-6(bean作用域和自动装配)

本章补充bean的作用域和自动装配 bean作用域 之前提到可以用scope来设置单例模式 <bean id="type" class="cn.dota2.tpye.Type" scope="singleton"></bean> 除此之外还有几种用法 singleton:......

白话
昨天
8
0
在PC上测试移动端网站和模拟手机浏览器的5大方法

总结很全面,保存下来以备不时之需。原文地址:https://www.cnblogs.com/coolfeng/p/4708942.html

kitty1116
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部