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的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
Jul 09 HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
什么是css原子化,有什么用?
Apr 24 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变量引用的面试题
2010/08/08 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
六年级数学教学反思
2014/02/03 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
党支部考察意见范文
2015/06/02 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技