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基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
CSS3实现多样的边框效果
May 04 HTML / CSS
CSS3 文字动画效果
Nov 12 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
h5网页水印SDK的实现代码示例
Feb 19 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
简略的前端架构心得&&基于editor为例子的编码小技巧
2010/11/25 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
2011/04/12 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
axios携带cookie配置详解(axios+koa)
2018/12/28 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Python内置函数property()如何使用
2020/09/01 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
学校介绍信范文
2014/01/14 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
感恩教育活动总结
2014/05/05 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
公务员个人总结
2015/02/12 职场文书
党支部鉴定意见
2015/06/02 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫