• 售前

  • 售后

热门帖子
入门百科

有关HTML5 Video对象的ontimeupdate变乱(Chrome上无效)的问题

[复制链接]
刘冠华 显示全部楼层 发表于 2021-10-25 19:53:07 |阅读模式 打印 上一主题 下一主题
日期在做一个视频播放的页面,此中用到了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"  />
</div>
</body>
</html>

固然你也可以像在页面上利用其它元素一样,给Video对象动态添加属性大概挂变乱,如:

复制代码代码如下:
video.ontimeupdate = function () { getCurrentVideoPosition(); };

不过上面这行代码貌似在Chrome上无效,可以利用addEventListener来代替它:

复制代码代码如下:
videoPlayer.addEventListener("timeupdate", function () { getCurrentVideoPosition(); }, false);

不知道是什么缘故原由在Chrome上不能直接将ontimeupdate变乱挂在Video元素上,而必须通过addEventListener方法来添加变乱。不过addEventListener也兼容IE和Firefox欣赏器,以是应该是通过的。

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作