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,js)
Dec 12 HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3实现DIV圆角效果完整代码
Oct 10 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
利用aardio给python编写图形界面
2017/08/21 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
深入了解python中元类的相关知识
2019/08/29 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
golang/python实现归并排序实例代码
2020/08/30 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
高级工程师岗位职责
2013/12/15 职场文书
中班幼儿评语大全
2014/04/30 职场文书
企业晚会策划方案
2014/05/29 职场文书
出售房屋委托书范本
2014/09/24 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
详解MySQL的半同步
2021/04/22 MySQL
Win11 Beta 22621.601 和 22622.601今日发布 KB5017384修复内容汇总
2022/09/23 数码科技