我可以播放视频并在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吗?
答案 0 :(得分:2)
您可以使用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>