文档章节

[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
济南
高级程序员
私信 提问
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
HTML5 视频转换软件 Freemake Video Converter

HTML5的Video标签可以说算是HTML5的重头戏,各大浏览器都纷纷响应,现代浏览器都能支持Video标签,基于Video标签的播放器也越来越多,但问题是每个浏览器所支持的视频格式不同,想在各大浏览...

海纳百川
2013/01/14
0
1
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
07/24
0
0
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx/Apache/PHP Hidden Version Number

nginx隐藏版本号的方法 在nginx配置文件nginx.conf中,加入以下代码: server_tokens off; apache隐藏版本号的方法 在apache配置文件httpd.conf中,加入以下代码: ServerTokens ProdServer...

Linux就该这么学
22分钟前
3
0
iOS 滚动视图 UIScrollView 代理方法 相关属性 状态栏 滚动条 回弹 弹簧效果

iOS 滚动视图 UIScrollView 代理方法 相关属性 状态栏 滚动条 回弹 弹簧效果 #import "ViewController.h"@interface ViewController () <span style="color:#ff0000;"><UIScrollViewDel......

壹峰
28分钟前
1
0
【转】Hive 工作原理详解

什么是Hive? Hive是建立在 Hadoop 上的数据仓库基础构架。它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储、查询和分析存储在 Hadoop 中的大规模数据的机制。...

hnairdb
28分钟前
3
0
开源 java CMS - FreeCMS2.8 微信管理 公众号设置

项目地址:http://www.freeteam.cn/ 公众号设置 管理员可以在这里设置微信公众号的相关配置,每个站点都可设置自己的微信公众号。 其中接口URL需要配置在微信公众号中,如下图所示 App Key ...

freeteam
30分钟前
2
0
MySQL中 replace 函数应用

将以下字段中的【忻州】替换为【洛阳】 Sql语句如下 UPDATE sys_organization SET org_name = REPLACE(org_name,'忻州','洛阳'); 执行结果如下...

karma123
32分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部