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);
};

如需更多教程,请到 淘课学院 http://www.taokeschool.com/ 下载。

(欢迎关注角速度微信:jiaosud)

HTML5 video 事件的更多相关文章

  1. video事件

    /** video播放器*/ * @ src: 指定所要嵌入视频.文档的URL. * @ poster: 视频预览图像 * @ autoplay: 视频自动播放 * @ loop: 循环播放 * @ ...

  2. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  3. HTML5 <video> - 使用 DOM 进行控制

    HTML5 <video> 元素同样拥有方法.属性和事件. 其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,&l ...

  4. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  5. HTML5 Video(视频)

    HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...

  6. Html5 Video 实现方案

    来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...

  7. Video事件、方法-- DOM

    <video> 元素同样拥有方法.属性和事件.其中的方法用于播放.暂停以及加载等.其中的属性(比如时长.音量等)可以被读取或设置.其中的 DOM 事件能够通知您,比方说,<video ...

  8. 使用HTML5视频事件示例

    <!DOCTYPE html > <html > <head> <title>Video events example</title> &l ...

  9. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

随机推荐

  1. Clover周报模块 -- 开发总结

    2014年7月8日 00:16:05 一.切图 这次开发,切图花了不少时间,样式是用scss写的,第一次用,不过用着用着就发现它的强大,层级.作用域.重用等都非常的方便,还有考拉神器,用着真是爽!不过 ...

  2. [每日一题JS] 正则表达式

    判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 var reg = /\b[a-zA-Z]{1}[a-zA-Z0-9_]{4,19}\b/; var fl ...

  3. cf B. Maximum Absurdity

    http://codeforces.com/contest/332/problem/B #include <cstdio> #include <cstring> #includ ...

  4. 自制单片机之一------AT89S51最小系统制做

    C51最小系统电路在网上一搜一大把,大同小异.我略做改动后如图: 加一个11.0592MHZ的晶振是为了以后做串口通信时和PC有相同的波特率.可用短路帽切换.说说板子的布局:网上卖的最小系统都是把板子 ...

  5. Qt浅谈之四十五QSplitter实现自由伸缩滑动窗口

    一.简介 最近看到一篇Qt实现伸缩滑动的窗口的文章,但其代码不完整.便在此重新书写了完整的代码,并开源出来.窗口的中央有滑动条可以动态改变子窗口的大小,隐藏的按钮可以快速伸缩子窗口.其效果图如下: 二 ...

  6. Visual Studio 启动加速

    Who is locking my SQL database?|Deploy a database project with TFS Build Visual Studio 2012 running ...

  7. bzoj1681[Usaco2005 Mar]Checking an Alibi 不在场的证明

    Description A crime has been comitted: a load of grain has been taken from the barn by one of FJ's c ...

  8. 简单拨号器(Android)

    感受: 1.了解了intent中的action和Uri. 2.了解了向下一个活动传递数据. 3.了解了内容提供器. 4.了解自定义适配器. 4.其实T9拨号器和简单计算器原理一样.

  9. javascript笔记7之对象数组

    /* var box = new Array(); //声明一个数组,空数组 alert(typeof box); //数组属于object类型 var box = new Array('李炎恢', ...

  10. (转)iOS7界面设计规范(11) - UI基础 - 图标与图形

    不知别人如何,我自己来讲,平时很习惯很有动力去做的一些事,譬如博客吧,一旦生活中出现一些让自己很难受的状况,就很容易受到影响:像是,你平时所习惯的生活状态都是基于某种东西的,一旦这种东西崩塌,会影响到 ...