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 24 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
Sep 09 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
Array.prototype.slice 使用扩展
2010/06/09 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
JS实现商品橱窗特效
2020/01/09 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python交互式图形编程实例(三)
2017/11/17 Python
python多维数组切片方法
2018/04/13 Python
python实现推箱子游戏
2020/03/25 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
局火灾防控工作方案
2014/05/25 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android