日前在做一个视频播放的页面，其中用到了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. delphi对象赋值

     Delphi的对象之间赋值主要要注意几个方面的问题:   1.对象之间的 :=赋值只是地址赋值,即是将当前对象的地址赋值到变量中,定义的变量可以是不用初始化的,在内存中两个变量指向的是同一地址空间: ...

  2. Python—元组tuple

    列表的知识其实就类似于c语言中的数组,可插入.修改.list=[a,b,c,d] 而元组tuple,一旦初始化即不可修改.好处与绝对安全. 定义一个空的元组:t=() 定义只有一个元素的元组:t=(1 ...

  3. Tomcat启动过程中找不到JAVA_HOME解决方法

    在XP上明明已经安装了JDK1.5并设置好了JAVA_HOME,可偏偏Tomcat在启动过程中找不到. 报错信息如下:Neither the JAVA_HOME nor the JRE_HOME en ...

  4. lr_convert_string_encoding（）转码函数

    例子:

  5. sql server 2000通过机器名可以连，通过ip连不上的问题

    客户那边两台服务器A和B,之前一直都是好好的,今天因为换了网络环境,结果数据库之间不能相互访问了. 目前只能A访问B,B访问不了A,在服务器A上面试了,通过ip连本机,也是连接超时. 开始想着是服务器 ...

  6. python py生成为pyc文件

    生成单个pyc文件 python就是个好东西,它提供了内置的类库来实现把py文件编译为pyc文件,这个模块就是 py_compile 模块. 使用方法非常简单,如下所示,直接在idle中,就可以把一个 ...

  7. Linux命令小结：fdisk

    查看分区信息 分区信息包括容量.扇区数目.柱面数目.磁头数目和IO大小等信息. root@cvm:/# fdisk -l /dev/sda7 Disk /dev/sda7: 441.8 GB, 441 ...

  8. apache的安装，启动和停止

    一.apache服务器的安装 安装步骤直接傻瓜式进行安装.并没有太大的难点.apache的配置是学习的重点和难点. 安装好后再浏览器地址栏输入http://localhost.若能够成功安装,则会显示 ...

  9. Linux下设置网卡随系统启动

    在GUI下安装RHEL,在配置网卡的时候,有时候会忘了勾选网卡随系统自动启动,解决方法是系统启动后,打开网卡配置文件/etc/sysconfig/network-script/ifcfg-eth*,将 ...

  10. JS-怎么得到局部域中的数据

    1,使用全局变量 var str = '';function fn1(){    var a = '大鸡腿~';    str = a;} 2,使用一个局部函数 function fn2(){     ...