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 translate完美实现表头固定效果
Feb 28 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 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 匿名函数与注意事项详细介绍
2016/11/26 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
jquery $.getJSON()跨域请求
2011/12/21 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
解析Python中的异常处理
2015/04/28 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python正则表达式使用经典实例
2016/06/21 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
高中生的学习总结自我鉴定
2013/10/26 职场文书
委托书范本
2014/09/13 职场文书
老兵退伍标语
2014/10/07 职场文书
教师个人教学反思
2016/02/23 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python