有关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 中的 ...
随机推荐
- nginx环境下配置nagios-关于commands.cfg
-w $ARG1$ -c $ARG2$ -M -b% -c % -f% -c % -f% -c % -f # define command{ command_name chec ...
- hello
#include <iostream> int main() { std::cout << "请输入两个数字:" << std::endl; , ...
- NLPP-00-Preparation
NLPP is short for Natural Language Processing with Python <Python 自然语言处理(Natural Language Process ...
- udp-->socket通信原理
UDP数据通讯原理 UDP数据通讯分服务端(软件)和客户端端: 服务端(软件)(服务器)先运行,服务端,不需要事先知道客户端IP和port 客户端(软件)(客户端机器)后运行, ...
- （引用） unittest测试驱动之执行测试(三)
转载:http://www.wtoutiao.com/p/ydeoyY.html 在unittest的模块中,提供了TestRunner类来进行运行测试用例,在实际的应用中,经常使用的是TextTes ...
- 第三十六章 metrics（4）- metrics-graphite
将metrics report给graphite(carbon-relay) 一.代码 1.pom.xml <!-- metrics-graphite --> <dependency ...
- AS错误：Please configure your build for VectorDrawableCompat.
运行第一个Android Stdio程序就出现下面这个问题,由于对Android Stdio不熟悉整了三个小时才解决,希望这篇博客能帮助更多的人. 问题:Caused by:java.lang.Run ...
- Revenge of Nim hdu 4994 (博弈)
http://acm.split.hdu.edu.cn/showproblem.php?pid=4994 题意:现在有两个人在取石子,共有n堆石子,每堆石子取完后才可以取下一堆石子,最后一个取石子的人 ...
- 剑指offer题目31-40
面试题31:连续字数组的最大和 public class Solution { public int FindGreatestSumOfSubArray(int[] array) { int len ...
- 使用 IntraWeb (40) - 自定义 Session 数据
修改 UserSessionUnit 单元: unit UserSessionUnit; interface uses IWUserSessionBase, SysUtils, Classes, IW ...