代码之家 › 专栏 › 技术社区 › Pam

javascript-视频上的覆盖按钮

overlay video button html javascript

Pam · 技术社区 · 6 年前

我可以播放视频,5秒钟后暂停。当它暂停5秒时,我想让一个按钮出现在屏幕中间。单击按钮时,我希望当前时间设置为20秒,按钮消失,视频播放为20秒。我不知道怎么执行这个。

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

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

1 回复 | 直到 6 年前

Joe Warner 6 年前

可以将单击处理程序添加到按钮 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>