日前在做一个视频播放的页面，其中用到了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事件的问题的更多相关文章

  1. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  2. HTML5 video 事件

    1.获取视频时间长度 当视频载入video后,使用 onloadedmetadata 事件获取视频的时间长度. video.onloadedmetadata = function () { var v ...

  3. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  4. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  5. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  6. HTML5 Video Blob

    我的博客搬家到https://www.w2le.com/了 <video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a9 ...

  7. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  8. 使用jQuery和CSS自定义HTML5 Video 控件 简单适用

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...

  9. 浏览器端-W3School-HTML：HTML DOM Video 对象

    ylbtech-浏览器端-W3School-HTML:HTML DOM Video 对象 1.返回顶部 1. HTML DOM Video 对象 Video 对象 Video 对象是 HTML5 中的 ...

随机推荐

  1. JQuery Object vs. DOM element

    JQuery Object 和 DOM的区别 HTML DOM 定义了访问和操作HTML文档的标准方法.其中 document 是DOM 树的根对象 ,在浏览器宿主环境中,可以通过JS操作HTML D ...

  2. setTimeout注意事项

    <script type="text/javascript">     function  show(v){        alert(v);    }    func ...

  3. Linux 中write()函数的出错情况及处理

    write函数首先将进程需要发送的数据先放在进程缓冲区中,然后向socket的发送缓冲区进行拷贝,在此,可能出现这样情况,即当进程缓冲区中的数据量大于此时发送缓冲区中所能接受的数据量时,若此时处于阻塞 ...

  4. （引用 ）自动化测试报告HTMLtestrunner

    1>下载HTMLTestRunner.py文件,地址为: http://tungwaiyip.info/software/HTMLTestRunner.html   Windows平台: 将下载 ...

  5. Oracle SQL*plus常用的命令和函数

    常用命令: 连接sqlplus命令行下运行cmd进入,如以sys模式登陆,命令如下:(1).sqlplus "sys/zhb126 as sysdba" (2).sqlplus/n ...

  6. JS中的this对象详解

    JS中this关键字很常见,但是它似乎变幻莫测,让人抓狂.这篇文章就来揭示其中的奥秘. 借助阮一峰老师的话:它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.这句话看似平常,可是要非常注意 ...

  7. linux中的开机和关机命令

    与关机.重新启动相关的命令 * 将数据同步写入硬盘中的命令  sync * 惯用的关机命令  shutdown * 重新启动.关机  reboot halt poweroff sync 强制将内存中的 ...

  8. Visual Studio Professional 2015 key

    Visual Studio Professional 2015 Key : HMGNV-WCYXV-X7G9W-YCX63-B98R2 Visual Studio Enterprise 2015 Ke ...

  9. App开发的过程

    直播App开发的过程 第一步:分解直播App的功能,我们以X客为例 视频直播功能,这是一款直播App最主要的功能,要能支持视频直播RTMP推流,使画面传输流畅.清晰(美颜后的清晰,你懂的聊天功能,用户 ...

  10. JS-定时器管理实例

    /** * Created by 12461 on 2016/11/6. */window.onload = function () { var oBtn1 = document.getElement ...