有没有办法根据当前正在播放的视频时间触发settimeout功能？

Question

我有一个当前在我的页面上运行的视频，我想在特定的视频时间调用 settimeout 函数。

例如，我想在视频时间的第 10 秒调用 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>

这就是我正在尝试的，但是，在这里，视频时间和 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) {&nbsp; &nbsp; if (e.timeStamp > 10000) {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('divid').style.display="block";&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; clearTimeout(timeout);&nbsp; &nbsp; &nbsp; &nbsp; timeout = setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (e.target.currentTime >= 9.9) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('divid').style.display="block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, 10000 - (e.target.currentTime * 1000));&nbsp; &nbsp; }}#divid {&nbsp; &nbsp; 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"&nbsp;type="video/mp4"></video><script></script>