日前在做一个视频播放的页面，其中用到了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. 实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个）

    document.getElementById("<%=textBox1.ClientID %>").value 实现textarea限制输入字数(包含中文只能输入10 ...

  2. console.log的应用

    这两天在学javascript,但是有个问题老是觉得很疑惑,那就是这两个表达式到底有啥区别,虽然结果输出都差不多,但是我想这个两个表达式被开发出来,肯定是有意义的吧!哪位高手解答下吧!Thanks i ...

  3. MySQL高可用方案选型参考

    http://imysql.com/2015/09/14/solutions-of-mysql-ha.shtml#rd?sukey=b0cb5c5b9e501303123bd48e86555c35e0 ...

  4. 很实用的jQuery事件 - toggle() 方法

    实例 切换不同的背景色: $("p").toggle( function(){ $("body").css("background-color&quo ...

  5. db2 进程

    DB2 通用数据库进程全接触 Dwaine Snow, DB2 UDB 和 Informix IDS 产品经理, IBM 多伦多实验室 Dwaine Snow 是 DB2 UDB 分区数据库以及查询巡 ...

  6. 网易视频云技术分享：linux软raid的bitmap分析

    网易视频云是网易倾力打造的一款基于云计算的分布式多媒体处理集群和专业音视频技术,提供稳定流畅.低时延.高并发的视频直播.录制.存储.转码及点播等音视频的PAAS服务,在线教育.远程医疗.娱乐秀场.在线 ...

  7. 批量导入Excel存在的问题及解决方案

    许多传统的做法,导入excel就是将excel上传到服务器的某个文件夹里如upload,之后再次读取,导入系统.这边就存在一些问题: 1.服务器需要安装Office,用于读取Excel文件. 2.系统 ...

  8. 反射中通过class标记来获取字段及方法

    //这是通过class标记获取字段的代码 Field[] fields= classzz.getDeclaredFields(); //获取该class标记的表名代码,必须为,getSimpleNam ...

  9. C# 基础（5）--字符串

    Params 可变参数,只能修饰数组,可以传递数组,也可以传递数组的元素. 要抛弃一个异常,可以这样写: Throe new exeception?? 命名空间 不在同一个命名空间下的类,不同直接访问 ...

  10. Java学习笔记 第一章 入门<转>

    第一章 JAVA入门 一.基础常识 1.软件开发 什么是软件? 软件:一系列按照特定顺序组织的计算机数据和指令的集合 系统软件:DOS,Windows,Linux 应用软件:扫雷.QQ.迅雷 什么是开 ...