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. Vim的snipMate插件

    介绍终于发现了一个插件,对于Vim下代码块的自动补全支持的很好.给大家推荐snipMate. snipMate可以帮助您在vim上实现类似Textmate的功能,自动代码块的能力非常强大,而且代码块是 ...

  2. 关于 VS2013监视窗口的内存面板及寄存器面板

    1.插入断点,按F5调试,2.选择菜单项 debug-窗口-3.即可找到您要的监视窗口.

  3. SuperMap

    SuperMap iClient for JavaScript 新手入门 地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地 ...

  4. bzoj 2075: [POI2004]KAG

    整天鬼畜题搞搞,感觉药丸…… 这种题出到xjoi模拟题里,太神了…… 这题的核心在于分割Cograph,尝试把Cograph的合成过程给求出来. 我们将这张图中的边为黑边,在这张图的补图中出现的边为白 ...

  5. TWRP-recovery中文界面安装方法[转]

    把下载到的ui.zip放入sdcard1/twrp文件夹.注意,是内置存储卡中.如没有上述文件夹,自行建立后通过文件管理器放入,不是卡刷.文件夹应如下所示:sdcard1(内置SD)  |  ┕--t ...

  6. 超强Altium Designer焊盘为梅花状连接,过孔为直接连接的方法

    AltiumDesigner6焊盘为梅花(或十字)状连接,过孔为直接连接的方法: 一.完成后效果 二.PCB规则设置(PCBRULES) 三.添加IsVia+ 四.添加InNamedPolygon() ...

  7. 【转】如何解决Ubuntu终端里面显示路径名称太长

    原文网址:http://jingyan.baidu.com/article/3d69c5516c129df0ce02d77b.html Ubuntu 默认的终端下面,进入很多层的目录后,前面那个提示符 ...

  8. select与epoll分析

    关于select与epoll的区别,网上的文章已是一大堆.不过别人的终究是别人的,总得自己去理解才更深刻.于是在阅读了大量的文章后,再装模作样的看下源码,写下了自己的一些理解. 在开始之前,要明白li ...

  9. php中对MYSQL操作之批量运行,与获取批量结果

    <?php //批量运行,与获取结果 //创建一个mysqli对象 $mysqli = new MySQLi("主机名","mysqlusername". ...

  10. STM32F051 IAP源代码分享

    STM32F051 IAP源代码分享 假设不懂IAP的请自己主动脑补或者怒戳这里 http://www.openedv.com/posts/list/11494.htm 然后STM32F051的IAP ...