html5 video获取当前时间和视频总时间长度
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获取当前时间和视频总时间长度的更多相关文章
- html5 video获取实时播放进度的方法
getvideoprogress(); function getvideoprogress() { setTimeout(function () { var vid = document.getEle ...
- 【转】Android HTML5 Video视频标签自动播放与自动全屏问题解决
为了解决 HTML5Video视频标签自动播放与全屏问题,在网上找了很多相关资料,网上也很多关于此问题解决方法,但几乎都不能解决问题,特别对各大视频网站传回来的html5网页视频自动播放与全屏问题,我 ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- HTML5 video 视频标签全属性详解
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- html5 video标签屏蔽右键视频另存为的js代码-HTML5教程
点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过 做HTML5的video标签,本身我们 ...
- 让所有浏览器支持HTML5 video视频标签
HTML5究竟需要多少种视频编码格式 当前,video 元素支持三种视频格式:Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4 = 带有 H.264 视频编 ...
- html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
- html5 video标签如何禁止视频下载
html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...
随机推荐
- VS2015开发环境的搭建
下面我教大家如何搭建VS2015 [环境]我的环境WIN8.1专业版(Ghost) [过程] [1]打开我们的附件vs2015.ent_chs.iso然后我们会进入到这个ISO文件中(windows版 ...
- Atlas+Keepalived实现MySQL读写分离、读负载均衡
一.基础介绍 ========================================================================================== 1. ...
- web项目开发流程
对于一个web项目,在实际编码之前,有一些通用的步骤来planning a website: 0.Defining the project (predr0->dr0) 对于外部项目,客户一般会发 ...
- client、offset、scroll系列
代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- Struts2学习-Ioc学习-spring
1.面向对象写法(带着面向过程的思维)电脑 computer = new 电脑(); [电脑代码中 new 打印机()]computer.打印文本("hello 140"); 电脑 ...
- .net 流(Stream) - StreamWriter和StreamReader、BinaryReader和BinaryWriter
转自:http://www.oseye.net/user/kevin/blog/86 一.StreamWriter和StreamReader 从上一篇博文可知文件流.内存流和网络流操作的都是字节,每次 ...
- NODE-环境变量的配置(踩坑总结)
初学Node.js,从官网下载了node.js的Windows Installer,安装完成后,通过控制台输入node命令,发现提示说“node"不是内部或外部命令,这通常是由于没有设置环境 ...
- 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中的意思就是用 ...
- arcgis server 9.3 查看地图服务时出现"No Content"错误
问题描述: 使用ArcGIS Server Manager的Add new service功能发布一个服务.然后启动服务 用浏览器访问该服务的地址http://localhost/ArcGIS/ser ...
- PhoneGap 的存储 API_Web Sql
一.介绍 此 API 基于 W3C WEB SQL Database Specification 和 W3C Web Storage API Specification. 有些 设备已经提供了对该规范 ...