有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题


Posted in HTML / CSS onJuly 19, 2013

日期在做一个视频播放的页面,其中用到了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浏览器,所以应该是通过的。
HTML / CSS 相关文章推荐
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
通过feDisplacementMap和feImage实现水波特效
Apr 24 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 #HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 #HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 #HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 #HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 #HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 #HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 #HTML / CSS
You might like
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
关于Django Models CharField 参数说明
2020/03/31 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
国际书籍零售商:Wordery
2017/11/01 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Shell如何接收变量输入
2016/08/06 面试题
个人应聘自我评价分享
2013/11/18 职场文书
教育学专业实习生的自我鉴定
2013/11/26 职场文书
《将心比心》教学反思
2014/04/08 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
导游词300字
2015/02/13 职场文书
放牛班的春天观后感
2015/06/01 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL