有关HTML5 Video对象的ontimeupdate事件的问题
日前在做一个视频播放的页面，其中用到了HTML5的Video对象，这个是HTML5中新增的一个对象，支持多种不同格式的视频在线播放，功能比较强大，而且还扩展了许多事件，可以通过JavaScript脚本来对视频播放进行控制。参考下面两个链接：
http://msdn.microsoft.com/en-us/library/windows/apps/hh465962.aspx
http://www.w3school.com.cn/html5/tag_video.asp
Video对象可以通过ontimeupdate事件来报告当前的播放进度，同时通过该事件还可以根据视频播放的情况来控制页面上的其它元素，例如随着视频播放的进度来切换章节、显示额外信息等。下面是一个例子：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
</head>
<body>
<script type="text/javascript">
function timeUpdate() {
document.getElementById('time').innerHTML = video.currentTime;
}
function durationChange() {
document.getElementById('duration').innerHTML = video.duration;
}
function seekVideo() {
document.getElementById('video').currentTime = document.getElementById('seekText').value;
}
window.onload = function () {
var videoPlayer = document.getElementById("video");
videoPlayer.ontimeupdate = function () { timeUpdate(); };
};
</script>
<div>
<video id="video" controls="controls"
poster="./images/videoground1.png"
src="./videoSource/video1.mp4" width="450px" height="320px"
ondurationchange="durationChange()" />
</div>
<div>Time: <span id="time">0</span> of <span id="duration">0</span> seconds.</div>
<div>
<input type="text" id="seekText" />
<input type="button" id="seekBtn" value="Seek Video" onclick="seekVideo();" />
</div>
</body>
</html>
当然你也可以像在页面上使用其它元素一样，给Video对象动态添加属性或者挂事件，如：
video.ontimeupdate = function () { getCurrentVideoPosition(); };
不过上面这行代码貌似在Chrome上无效，可以使用addEventListener来代替它：
videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);
不知道是什么原因在Chrome上不能直接将ontimeupdate事件挂在Video元素上，而必须通过addEventListener方法来添加事件。不过addEventListener也兼容IE和Firefox浏览器，所以应该是通过的。
有关HTML5 Video对象的ontimeupdate事件的问题的更多相关文章
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 video 事件
1.获取视频时间长度 当视频载入video后,使用 onloadedmetadata 事件获取视频的时间长度. video.onloadedmetadata = function () { var v ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- HTML5 Video Blob
我的博客搬家到https://www.w2le.com/了 <video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a9 ...
- Web视频播放 之 【HTML5 Video标签】
一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
- 浏览器端-W3School-HTML：HTML DOM Video 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Video 对象 1.返回顶部 1. HTML DOM Video 对象 Video 对象 Video 对象是 HTML5 中的 ...
随机推荐
- 论垃圾邮件危害性及U-Mail邮件系统必杀技
阿里集团今年“双十一电商节”又一次突破了去年营收,创造了新的历史.相信在电商日益渗入生 活的今天,你在日常工作中一定收到过某店铺发来的推广邮件,的确,邮件如今被电商广泛应用于消费者购物各环节,但是在其 ...
- Android消息推送——JPush极光推送
刚看了一篇关于Android消息推送评测总结的博客http://www.cnblogs.com/logan/p/4514635.html: 自己也对原学过的JPush极光进行一下小结,方便后续工作使用 ...
- LeetCode OJ 274. H-Index
Given an array of citations (each citation is a non-negative integer) of a researcher, write a funct ...
- C# webApi 与 AngularJs 实现增删改Demo 讲解（一）
公司在使用webAPI+AngularJs+SlcikGrid进行产品开发,自己也是初学Angular,就做了一个Demo,实现增删改功能,希望可以帮助大家. 界面如同所示: 数据库一张单表很简单, ...
- vbox进行克隆时时启动eth0时问题
在进行虚拟机克隆时会出现mac地址冲突,在进行网卡启动时,会出现device eth0 does not seem to be present问题,解决方案如下: 问题描述: device eth0 ...
- JavaScript parseInt() toString()函数
parseInt(string, radix) string:必需.要被解析的字符串 radix:可选.表示要解析的数字的基数.该值介于 2 ~ 36 之间. 如果省略该参数或其值为 0,则数字将以 ...
- Awesome Machine Learning
https://github.com/josephmisiti/awesome-machine-learning 包含了很多的machine-learning开源的资源,包括各种语言的machin l ...
- c# 调用分页（控制器端的）与时间的格式
1.在操作的model中: 2.在控制器中: , command.PageSize);//将从数据库获取到的集合进行分页 var gridModel = new DataSourceResult { ...
- hdoj 2680 choose the best route
Problem Description One day , Kiki wants to visit one of her friends. As she is liable to carsicknes ...
- 有关eclipse连接SQL Server 2008的问题
1.首先,提供一个链接http://blog.163.com/jackie_howe/blog/static/19949134720122261121214/ 这个链接有详细更改SQL Server ...