名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。
- 本篇文章的具体介绍如下
日期在做一个视频播放的页面，其中用到了网页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').inner网页hTML = video.currentTime;
}
function durationChange() {
document.getElementById('duration').inner网页hTML = 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教程网页文章标签与网页hTML4网页文章标签的区别示例介绍
<meta charset=utf-8>
PhP100中文网网页hTML5教程专题 <style type="text/css" rel="stylesheet"> header,nav,article,footer {border:solid 1px #666;padding:5px} header{width:500px} nav{float:left;width:60px;height:200px} article{float:left;width:428px;height:200px} footer{clear:both;width:500px} </style> <script type="text/javascript"> document.createElement('article'); document.createElement('nav'); document.createElement('header'); </script> <body>导航相关数据 网页hTML5教程专题视频教程
发布日期:测试相关内容