如何检测何时播放HTML5视频的第一帧？

我问这个问题是因为我想显示一个覆盖图像的确切播放时间，如3:00

因此，我绑定了播放事件和状态setTimeout…，18000以显示图像

但是，设置超时似乎做得太早了。图像显示速度比预期快。在视频准备好之前，我可以站起来观看比赛

所以我也尝试绑定loadeddata和playing event。但这一次，图像显示速度比预期慢

此外，图像似乎是以随机方式显示的，不一定总是在同一时间显示，只需几次测试，就有点不同了

---

是否存在可以使用setTimeout在精确时间显示图像的事件？或者简单地说，如何在视频的精确时间显示图像？

还有另一种方法，使用currentTime并为每次视频更改的时间定义一个函数。在HTML5视频元素上设置一个div，并在currentTime介于3到4秒之间时修改该元素

示例代码如下所示：

HTML:

JavaScript:

var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
    //if currentTime is greater than 3 but less than 4, as in second 3+, go into if statement, otherwise go to else statement
    if (vid.currentTime > 3 && vid.currentTime < 4) {
        document.getElementById("video_overlays").innerHTML = '<p>Image Here</p>';
    }
    else {
        document.getElementById("video_overlays").innerHTML = '';
    }
}

您可以在第一个if语句中暂停视频，然后显示图像，然后在某个超时后再次启动视频，如果这是您的意图，但此代码本质上是执行类似操作的框架

---

工作样本：

谢谢。至少当我依赖视频的当前时间时，它不会导致随机方式。

#video_box{
    position:relative;
}
#video_overlays {
    position:absolute;
    width:160px;
    min-height:100px;
    background:transparent;
    z-index:300000;
    bottom:50px;
    left:10px;
    text-align:center;
}

var vid = document.getElementById("myVideo");

// Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
    //if currentTime is greater than 3 but less than 4, as in second 3+, go into if statement, otherwise go to else statement
    if (vid.currentTime > 3 && vid.currentTime < 4) {
        document.getElementById("video_overlays").innerHTML = '<p>Image Here</p>';
    }
    else {
        document.getElementById("video_overlays").innerHTML = '';
    }
}