JavaScript - 视频上的叠加按钮

Question

我可以播放视频并在 5 秒后暂停。当它暂停 5 秒时，我希望屏幕中间出现一个按钮。单击按钮时，我希望将 currentTime 设置为 20 秒，按钮消失，视频在 20 秒时播放。我不确定如何执行此操作。

这是我到目前为止所拥有的:

.js

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();
}

.html

<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>

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

Answer 1

您可以使用onclick="function()"向按钮添加点击处理程序

我们将其样式设置为不显示，因为您希望它一开始就隐藏

我们将在 JavaScript 中选择将其称为按钮，当您暂停视频时，我们会将其设置为可见。

var video = document.getElementById("myvid");
var button = document.querySelector("button");
var firstRun = true;
video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 5 && firstRun) {
        this.pause();
        firstRun = false;
        button.style = "display: block";
    }
});

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

button {
  display: none; 
  position: absolute;
  top: 40px;
}

<div id="wrapper">
    <video id="myvid" width="320" height="240" controls>
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    </video>

    <button onclick="skip()">skip</button>
</div>