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. JS原型的剖析与理解

    原型相关的概念 关于面向对象的概念 类 class 在js中就是构造函数 在传统的面向对象语言中,使用一个叫类的东西定义模版,然后使用模版创建对象 在构造方法中也具有类似的功能,因此称其为类 实例与对 ...

  2. curl抓取信息

    <?php $hotel = new curl(false,0); $str = $hotel -> post("http://www.todayinns.com/login.p ...

  3. linux清理僵尸进程

    查看服务器时发现好3个僵尸进程,僵尸进程存在好多天了,一直不会处理,留到了今天,顺便清理下僵尸进程吧 top命令中统计了僵尸进程,是第二行最后一项3 zombie. 或者使用下面的命令得到僵尸进程数量 ...

  4. 使用Android平板编程,执行linux命令

    android有一些应用支持开发, AIDE 介绍http://www.wandoujia.com/apps/com.aide.ui https://play.google.com/store/app ...

  5. HTML&CSS基础学习笔记1.25-input标签隐藏元素

    隐藏元素 有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden". ...

  6. 窗口过程 - Windows程序设计(SDK)006

    窗口过程 让编程改变世界 Change the world by program 内容节选: Windows 把这样一个窗口分为了客户区和非客户区,这里边白色的这一大片就是客户区,而这些标题栏.菜单栏 ...

  7. ARM 汇编器对C的扩展

    __swi void ledtest();    //:声明 edtest 是个软中断. __asm  内嵌汇编          //:通常在C程序里面需要嵌入汇编代码,这是就可以用__asm关键字 ...

  8. 解决ScrollView 与ListView共存显示不完全的问题

    ScrollView与ListView共存会存在滚动的问题,并且ListView只显示一个半Item. 当ListView的高度设定一定的值时,ListView同样地会显示对应的高度的Item. 因此 ...

  9. [转]RegOpenKeyEx函数失败的问题

    在使用这个函数RegOpenKeyEx的时候,老是执行不成功,函数本身返回2,GetLastError返回0.在CSDN上查阅资料说是返回2的原因是注册表中对应路径不存在,可是我电脑中注册表那个键值明 ...

  10. IntelliJ IDEA: maven & jetty 开发 java web

    之前使用eclipse + maven + jetty开发java web应用,本着no zuo no gain的想法, 折腾了一下Intellj idea下开发环境的搭建,顺带学习了maven re ...