JavaScript-视频上的覆盖按钮

我可以播放视频，并在5秒后暂停。当它在5秒内暂停时，我希望有一个按钮出现在屏幕中间。单击按钮时，我希望currentTime设置为20秒，按钮消失，视频播放为20秒。我不知道该怎么做

这就是我到目前为止所做的：

.js

.html

//我能在这里按一下按钮吗？

---

既然它现在是一个按钮，我还需要.css吗？

您可以使用

onclick=“function（）”

我们会将其样式设置为“无显示”，因为您希望从一开始就隐藏它

我们将在javascript中选择call it

按钮，当您暂停视频时，我们将其设置为可见


var video=document.getElementById（“myvid”）；
var按钮=document.querySelector（“按钮”）；
var firstRun=true；
video.addEventListener（“时间更新”，函数（）{
如果（this.currentTime>=5&&firstRun）{
这个。暂停（）；
firstRun=false；
button.style=“显示：块”；
}
});
函数skip（）{
video.currentTime=20；
video.play（）；
button.style=“”；
}
按钮{
显示：无；
位置：绝对位置；
顶部：40px；
}

跳过
跳过20延迟和按钮工作，但它没有继续为我播放。也是第二次，它只是暂停了。仅供参考，我想所有的问题都可以解决。@JoeWarner这很有效，谢谢！！有没有办法将按钮覆盖在视频上而不是放在视频外面？？
var video = document.getElementById("myvid");
video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 5) {
        this.pause(); 
        //need to call for the button to appear in the video screen. overlay?
        //when the button is clicked, call the skip() function
        //button needs to disappear 
    }
});

function skip(){
    video.currentTime = 20;
    video.play();
}

<div id="wrapper">
    <video id="myvid" width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
    </video>

    //would i put an onclick button here?
</div>