全国统一热线:
028-86758058
18980748058
购买流程
付款方式
常见问题
在线提问
续租服务
购物车(
0
件)
用户名:
密 码:
记住
首 页
HOME
域名注册
DOMAIN
虚拟主机
WEB HOST
成品网站超市
AUTO Site
VPS主机
VPS SERVER
云 主 机
CLOUD HOST
租用托管
SERVER
海外主机
HK HOST
代理专区
AGENT
客服中心
SERVICE
站长教程
SERVICE
欢迎光临西部数据云计算中心,我们将竭诚为您提供最优质的服务!
中文域名
域名转入
域名转出
DNS管理
动态域名
获取域名证书
域名停放
域名过户
集群主机
双线主机
基本主机
港台主机
论坛主机
Linux主机
Vip合租主机
超G型主机
ASP.net主机
Java主机
智能建站主机
网店主机
美国主机
数据库
成品网站超市
智能建站主机
集群VPS主机
国内VPS主机
香港VPS主机
美国VPS主机
云主机介绍
云主机购买
服务器租用
主机托管
常见问题
香港主机
港台主机
美国主机
国内免备案
步骤流程
代理级别
代理合同
代理模式
代理优势
在线申请
产品列表
常见问题
代理商分布图
常见问题
有问必答
跟踪提问
购买流程
产品价格
付款方式
常用软件
网站备案
续租服务
汇款确认
相关文档
联系我们
域名资讯
主机资讯
行业动态
网页制作
php教程
mysql教程
域名资讯
云计算资讯
网络编程
您当前的位置:
首页
>
网络编程
>
网站制作
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
时间:1970-01-01 来源:互联网 作者:佚名
日期在做一个视频播放的页面,其中用到了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浏览器,所以应该是通过的。
来顶一下
返回首页
推荐资讯
从零开始学ASP.NET-基础篇第1/7页
第一天 学习目的: 掌握最基本的Label、TextBox、Button控件
ASP.NET入门数据篇
对于网站编程的初学者来说,总是会上网找些源码来看,但久而
相关文章
用Html5与Asp.net MVC上传多个文件的实现代码
html5 乒乓球(碰撞检测)实例二
HTML5 script元素async、defer异步加载使用介绍
HTML5在a标签内放置块级元素示例代码
HTML5 window/iframe跨域传递消息 API介绍
HTML5实现一个能够移动的小坦克示例代码
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
html5文字阴影效果text-shadow使用示例
HTML5 中新的全局属性(整理)
html5 迷宫游戏(碰撞检测)实例一
栏目更新
栏目热门
返回首页
关于我们
联系我们
付款方式
价格总览
资讯中心
友情链接
媒体关注
有问必答
投诉建议
网站备案
《中华人民共和国增值电信业务经营许可证》编号:川B2-20080058号
官方网址:
xibushuju.com
西部数据
Copyright © 2002~2015
天府快车
版权所有
电话总机:
028-86758058
(50线) 传真:
028-86758058