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. PHP根据概率产生随机数

    假设 有四个选项:a 占 10%,b占20% ,C占30% , d 占 40% ,原理就是现获取随机数,然后找区间.当然了,选项的数量可以任意.目前默认是 总和是 100% .如果需要别的数,修改 随 ...

  2. CSAPP--优化程序性能

    一.编写高效的程序: 1.选择合适的算法和数据结构. 2.编写出编译器能够有效优化以转换为高效可执行的源代码. 3.并行计算.当然重点还是第一个,良好的算法和数据结构大大减小了程序的时间复杂度. 二. ...

  3. 需要熟悉的几个调试命令:objdump/pmap/ldd/stace

    最近要编译很多库,还涉及到若干进程操作,所以就把相关的命令记录下来. 一,objdump命令 该命令适用于ELF可执行文件,常用的命令如下: objdump -h xx.o : 输出ELF文件的各个段 ...

  4. ServletContext对象(每个工程只有一个此对象)

    一]重点方法:        1>存取对象                        void setAttribute(String name, Object object);//将obj ...

  5. Altium Designer 覆铜时过孔连接形式的设置——只将过孔连接设置为Direct Connect

    Altium Designer 在PCB覆铜时,所有的过孔和焊盘都是十字连接即Relief Connect连接的,没有像PROTEL 99SE一样只有接地的焊盘才是十字连接而过孔是直接连接的. 如下图 ...

  6. 如何修改Qt标准对话框的文字(例如,英文改成中文)

    此篇文章参考qtcn论坛整理而成,因为文字和图片是本人亲自组织,所以仍算原创. http://www.qtcn.org/bbs/read-htm-tid-30650.html http://blog. ...

  7. Qt编程之qrc文件的链接

    在Qt里面,.qrc文件是一种类似XML结构的文件,用结构化数据描述应用程序所需要的资源位置,例如图片,应用程序的图标文件等.它最终是与.ui文件类似都被通过Qt提供的命令行工具生成对应的qrc_XX ...

  8. 直接修改别人jar包里面的class文件 工具:jclasslib

    出于某些原因 需要把别人jar包里面的class修改一下信息 配置文件*.properties MANIFEST.MF 这些东西可以直接用记事本打开修改 然后替换掉就OK.. 在网上游荡了半天,没有找 ...

  9. 40 个超棒的免费 Bootstrap HTML5 网站模板

    Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 目前 ...

  10. Jsensation | 氪加

    Jsensation | 氪加 www.jsensation.com