HTML5 video 事件应用示例


Posted in HTML / CSS onSeptember 11, 2014

1、获取视频时间长度

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

复制代码
代码如下:

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);
};
HTML / CSS 相关文章推荐
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
浅谈css3中的前缀
Jul 20 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
使用phonegap播放音频的实现方法
Mar 31 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
解析CSS 提取图片主题色功能(小技巧)
May 12 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 #HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 #HTML / CSS
html5中的input新属性range使用记录
Sep 05 #HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 #HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 #HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 #HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 #HTML / CSS
You might like
php代码书写习惯优化小结
2013/06/20 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
微信支付扫码支付php版
2016/07/22 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
又一个小巧的图片预加载类
2007/05/05 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python tkinter窗口最大化的实现
2019/07/15 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
python3让print输出不换行的方法
2020/08/24 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
西安交大自主招生自荐信
2014/01/27 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
施工安全协议书
2016/03/22 职场文书
Python实现byte转integer
2021/06/03 Python
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers