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中选择它button，当您暂停视频时，我们会将其设置为可见。

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>