日前在做一个视频播放的页面，其中用到了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. phpPgAdmin安装与配置

    1.phpPgAdmin不需要安装,直接从Sourceforge下载压缩包,解压到“/var/www/”文件夹下即可. 解压后,要为该文件夹赋予root用户和root组的权限 chown -R roo ...

  2. 2015年毕业生收到的offer和薪资透露

    个人情况:全国排名70多的大学,非211,计算机专业硕士 收到的offer: 苏州同程旅游--6k/月 ,自己要了这么多,就给了这么多,没有规范.苏州蜗牛科技--8k/月 ,给了个口头offer,要去 ...

  3. cognos函数学习

    1.aggregate(currentMeasure within set set([意健险], [财产险], [车险])) 汇总所有 2.tuple([保费],[车险]) 3.percentage( ...

  4. SPI总线的特点、工作方式及常见错误解答

    1.SPI总线简介 SPI(serial peripheral interface,串行外围设备接口)总线技术是Motorola公司推出的一种同步串行接口.它用于CPU与各种外围器件进行全双工.同步串 ...

  5. Linux命令（1）- grep

    1.grep 功能:查找文件里符合条件的字符串. 语法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数& ...

  6. LeetCode(一)

    数据流的中位数 class MedianFinder { private Queue<Integer> maxHeap = new PriorityQueue(new Comparator ...

  7. .net WebApi中使用swagger

    我在WebApi中使用swagger的时候发现会出现很多问题,搜索很多地方都没找到完全解决问题的方法,后面自己解决了,希望对于遇到同样问题朋友有帮助.我将先一步一步的演示项目中解决swagger遇到问 ...

  8. 插件兼容CommonJS, AMD, CMD 和 原生 JS

    模块标准 CommonJS CommonJS 有三个全局变量 module.exports 和 require.但是由于 AMD 也有 require 这个全局变量,故不使用这个变量来进行检测. 如果 ...

  9. javascript学习第一课

    1.基本知识: 1.1 词法结构 1.1.1 字符集 javascript程序是用Unicode字符集编写的. 1.1.2 区分大小写 javascript是区分大小写的语言.也即是关键字.变量.函数 ...

  10. Python学习第四天集合

    集合定义: 无序排列,可哈希 支持集合关系测试 成员关系测试 in not in 迭代 不支持:索引.元素获取.切片 集合的类型:set(),frozenset() 集合没有特定语法格式,只能通过工厂 ...