| 标题 | 有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题 |
| 内容 | 日期在做一个视频播放的页面，其中用到了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浏览器，所以应该是通过的。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。