html:

<video
id="video-active"
class="video-active"
width="640"
height="390"
controls="controls">
<source src="myvideo.mp4" type="video/mp4">
</video>
<div id="current">0:00</div>
<div id="duration">0:00</div>

js:
$(document).ready(function(){
$("#video-active").on(
"timeupdate",
function(event){
onTrackedVideoFrame(this.currentTime, this.duration);
});
} function onTrackedVideoFrame(currentTime, duration){
$("#current").text(currentTime);
$("#duration").text(duration);
}

html5 video获取当前时间和视频总时间长度的更多相关文章

  1. html5 video获取实时播放进度的方法

    getvideoprogress(); function getvideoprogress() { setTimeout(function () { var vid = document.getEle ...

  2. 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决

    为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...

  3. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  4. HTML5 video 视频标签全属性详解

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  5. HTML5 Video(视频)

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

  6. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  7. 让所有浏览器支持HTML5 video视频标签

    HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...

  8. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  9. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

随机推荐

  1. 任务十四:零基础JavaScript编码(二)

    任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM ...

  2. spring-wind 搭建过程问题记录

    最近想搭一个 shiro+ssm的快速开发框架,用于后台管理以及微信公众号的开发.后台主要是权限管理,于是选择有spring+shiro,微信公众号的前端页面搜了下有用velocity开发的,刚好看到 ...

  3. SVN升级到1.8后 Upgrade working copy

    SVN升级到1.8后没法用了,不能提交,提示说要SVN Upgrade working copy, 但是半天在根目录和.svn所在文件夹上面右键都没有找到这个菜单. 坑爹的…… 最后找到解决办法是:重 ...

  4. 【Leetcode】【Medium】Validate Binary Search Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  5. UIButton中的**EdgeInsets是做什么用的?

    UIButton中的**EdgeInsets是做什么用的? UIEdgeInsetsMake Creates an edge inset for a button or view.An inset i ...

  6. IP及DNS设置(Netsh)

    #根据连接状态查找使用中网卡gwmi win32_networkadapter -filter "NetConnectionStatus = 2"#根据是否配置网关查找使用中网卡$ ...

  7. 沉淀,再出发:Maven的使用和规范

    沉淀,再出发:Maven的使用和规范 一.前言 Maven作为项目管理工具,在一个大型项目开发的每个阶段都有着很大的用处,为什么需要这个东西呢,还是为了消除不确定性,统一化管理,正如我们做的每一件事其 ...

  8. macbook pro 2016 2017 15寸 雷电3 外接显卡 epu 简单教程(不修改UEFI)

    雷电3外接显卡效果还不错,但是除了akitio node 其他厂家并不会维护自己的固件来适配新机型,我自己买的mbp 2016 15''就出现了和AORUS Gaming Box 1070不兼容的问题 ...

  9. 关于LDA的文章

    转:http://www.zhizhihu.com/html/y2011/3228.html l  Theory n  Introduction u  Unsupervised learning by ...

  10. 解析csv数据导入mysql的方法

    mysql自己有个csv引擎,可以通过这个引擎来实现将csv中的数据导入到mysql数据库中,并且速度比通过php或是python写的批处理程序快的多. 具体的实现代码示例: 代码如下: load d ...