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. VS2015开发环境的搭建

    下面我教大家如何搭建VS2015 [环境]我的环境WIN8.1专业版(Ghost) [过程] [1]打开我们的附件vs2015.ent_chs.iso然后我们会进入到这个ISO文件中(windows版 ...

  2. Atlas+Keepalived实现MySQL读写分离、读负载均衡

    一.基础介绍 ========================================================================================== 1. ...

  3. web项目开发流程

    对于一个web项目,在实际编码之前,有一些通用的步骤来planning a website: 0.Defining the project (predr0->dr0) 对于外部项目,客户一般会发 ...

  4. client、offset、scroll系列

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  5. Struts2学习-Ioc学习-spring

    1.面向对象写法(带着面向过程的思维)电脑 computer = new 电脑(); [电脑代码中 new 打印机()]computer.打印文本("hello 140"); 电脑 ...

  6. .net 流(Stream) - StreamWriter和StreamReader、BinaryReader和BinaryWriter

    转自:http://www.oseye.net/user/kevin/blog/86 一.StreamWriter和StreamReader 从上一篇博文可知文件流.内存流和网络流操作的都是字节,每次 ...

  7. NODE-环境变量的配置(踩坑总结)

    初学Node.js,从官网下载了node.js的Windows Installer,安装完成后,通过控制台输入node命令,发现提示说“node"不是内部或外部命令,这通常是由于没有设置环境 ...

  8. js call、apply和bind

    function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); 例1 例子1中的意思就是用 ...

  9. arcgis server 9.3 查看地图服务时出现"No Content"错误

    问题描述: 使用ArcGIS Server Manager的Add new service功能发布一个服务.然后启动服务 用浏览器访问该服务的地址http://localhost/ArcGIS/ser ...

  10. PhoneGap 的存储 API_Web Sql

    一.介绍 此 API 基于 W3C WEB SQL Database Specification 和 W3C Web Storage API Specification. 有些 设备已经提供了对该规范 ...