Question

我的页面中当前正在播放一个视频，我想在特定视频时间调用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函数之间没有任何关系，而这正是我想要建立的

Answer 1

为什么不只听视频中的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>

有没有一种方法可以根据当前播放的视频时间触发settimeout功能？

1 个答案: