JavaScript - кнопка наложения на видео - PullRequest
Новая
       23

JavaScript - кнопка наложения на видео

0 голосов
/ 27 мая 2018

Я могу воспроизвести видео и сделать паузу через 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?

1 Ответ

0 голосов
/ 27 мая 2018

Вы можете добавить обработчик клика к кнопке с помощью 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>
...