日前在做一个视频播放的页面,其中用到了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. WinForm任务栏最小化

    在C#编写的WinForm里,在FormBorderStyle设为None的时候,任务栏点击程序图标,不会自动最小化.在主窗口WinForm.cs里加入如下代码后,即可恢复该功能. protected ...

  2. 《Focus On 3D Terrain Programming》中一段代码的注释三

    取自<Focus On 3D Terrain Programming>中的一段: //--------------------------------------------------- ...

  3. 关于2440的裸跑程序中SD卡读后不能成功写入问题的讨论

    问题描述: TQ2440的官方裸跑程序中,对SD卡先进行读操作,然后再写,发现不能程序卡死.倘若对SD卡先写后读,程序可以正常运行,奇哉怪哉? 写数据的关键代码--> while(i < ...

  4. 第八篇、SVN在Mac上使用

    Mac自带svn软件 1.创建目录 svn-repository/source-code 2.svnadmin create /Users/liaokailin/svn-repository/sour ...

  5. POJ 3522 Slim Span

    题目链接http://poj.org/problem?id=3522 kruskal+并查集,注意特殊情况比如1,0 .0,1.1,1 #include<cstdio> #include& ...

  6. 关于Python在Linux、Mac和Windows上的安装方法总结

    一.Linux下安装python   1.python源码安装包下载地址:   https://www.python.org/downloads/source/   2.下载完tar.xz压缩包以后, ...

  7. css3中的关键帧技术分析应用

    最近在研究网页加载进度效果的时候发现可以使用css3实现这个效果. 使用css3实现完全不需要图片,相比使用loading.gif的实现来说可能更快. 使用css3实现动态加载的效果,主要会涉及到几个 ...

  8. C语言的第二次作业

    一.PTA实验作业 题目1. 计算分段函数 本题目要求计算下列分段函数f(x)的值: 1.本题代码 #include<stdio.h> #include<math.h> int ...

  9. mysql8.0版本修改密码

    登录之后使用如下命令: ALTER USER 'root'@'localhost' IDENTIFIED BY "你的新密码"; 还有不知是不是因为mysql版本问题,一开始设置的 ...

  10. K-means聚类算法原理和C++实现

    给定训练集$\{x^{(1)},...,x^{(m)}\}$,想把这些样本分成不同的子集,即聚类,$x^{(i)}\in\mathbb{R^{n}}$,但是这是个无标签数据集,也就是说我们再聚类的时候 ...