日前在做一个视频播放的页面，其中用到了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. Vc++ 控件用法总结之List Control

    1.新建对话框MFC,在对话框上放一个ListCtrl ID:IDC_PATH View:Report 2.为ListCtrl添加变量 右击->添加变量m_wndPath 3.找到OnInitD ...

  2. js中的引用类型-object

  3. 【MVC】 非常简单的页面导出 WORD, EXCEL方法

    [MVC] 页面导出 WORD, EXCEL 前端 js function output() { var para = new Object(); para.html = getHtml(" ...

  4. ffffffuzzzzzzzzzzzzing

    为了克服现有 Fuzzing 技术对目标程序缺乏理解.测试完全随机且盲目的缺点,提出了新方法:基于动态符号执行的智能测试技术. 先通过静态分析获得危险点,然后通过符号执行收集路径条件,最后利用约束求解 ...

  5. [原创]PCB知识补充

    近期又要使用Altium进行PCB板的绘制,算起来从大学课上第一次接触Protel99SE到现在已经算是半个熟练工了.不过现在想来还是能回忆起第一次使用的情景,对着一幅简单的原理图使用着自动连线的功能 ...

  6. [转载]Altium规则详解及设置

    在Altium中进行PCB的设计时,经常会使用规则(Rule)来进行限定以确定线宽孔径等参数,此文将简要的介绍规则中的一些标量代表了什么. Electrical——电气规则.安全间距,线网连接等 Ro ...

  7. nginx反向代理编译异常

    cc1: warnings being treated as errors /root/nginx_tcp_proxy_module/ngx_tcp.c: 在函数‘ngx_tcp_add_addrs’ ...

  8. android笔记:DatePickerDialog日期设置对话框

    在开发中,可以通过DatePickerDialog来设置日期,TimePickerDialog来设置时间. 实例化DatePickerDialog对象之后,再调用show方法就可以显示对话框了. 具体 ...

  9. pause 和 title

    -------siwuxie095 pause 暂停批处理程序,并显示:请按任意键继续- 暂停高级技巧: pause>nul 只暂停,不显示任何信息,且光标移到下一行 如果不想用默认提示语:请按 ...

  10. Python全栈--7.1--字符串的格式化

    Python字符串格式化:(百分号/format) 1.百分号的方式: %[(name)][flags][width].[precision]typecode (name)      可选,用于选择指 ...