如何解决有没有一种方法可以根据当前播放的视频时间触发settimeout功能?
我的页面中当前正在播放一个视频,我想在特定视频时间调用settimeout函数。
例如,我想在视频时间的第十秒调用settimeout函数,此时用户可以按自己的意愿暂停视频。基本上我想将settimeout函数的时间与视频时间同步。
<video id="video" autoplay controls>
<source id="mp4" src="https://api.imaginedreality.in/?filename={{video}}"
type="video/mp4">
</video>
<script>
window.onload=start;
function start(){
setTimeout(showdiv,10000)
}
function showdiv(){
document..getElementById('divid').style.display="block"
}
</script>
这是我正在尝试的方法,但是在这里,videotime和setTimeout函数之间没有任何关系,而这正是我想要建立的
解决方法
为什么不只听视频中的progress
,play
和seeked
事件,当您获得视频时,看看您是否在十秒以上,如果不是,设置超时以检查适当的秒数?
let timeout;
document.getElementById('video').addEventListener('play',checkVideo);
document.getElementById('video').addEventListener('seeked',checkVideo);
document.getElementById('video').addEventListener('progress',checkVideo);
function checkVideo(e) {
if (e.timeStamp > 10000) {
document.getElementById('divid').style.display="block";
} else {
clearTimeout(timeout);
timeout = setTimeout(() => {
if (e.target.currentTime >= 9.9) {
document.getElementById('divid').style.display="block";
}
},10000 - (e.target.currentTime * 1000));
}
}
#divid {
display: none;
}
<div id="divid">Test</div>
<video id="video" autoplay controls>
<source id="mp4" src="https://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4"
type="video/mp4">
</video>
<script>
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。