欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

有关HTML5 Video工具的ontimeupdate变乱(Chrome上无效)的题目

发布时间:2016-11-25  编辑:杨雨个人博客网站   点击:   

日期在做一个视频播放的页面,其顶用到了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赏识器,以是应该是通过的。 本文地址:http://itbyc.com/web/html5/13270.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1