JavaScript / CSS - кнопки с наложением видео

Question

Я создал простой html / javascript / css, чтобы узнать об этом.Это видео с кнопками внутри.Я хочу, чтобы кнопки были невидимыми до тех пор, пока видео не будет воспроизводиться в течение 5 секунд, после чего видео будет приостановлено и появятся кнопки.Мне удалось заставить это работать с 1 кнопкой, но теперь я хочу расширить это до 3 кнопок.По какой-то причине, когда я запускаю его, когда видео достигает 5 секунд, кнопки 2 и 3 переходят к следующей строке.Я не понимаю, почему он это делает.Кроме того, как сделать все кнопки невидимыми, пока видео не остановится через 5 секунд?Я хотел бы, чтобы он показывался тогда, а затем, после того как я выбрал кнопку, кнопки снова исчезают.

Вот мой HTML:

<div id="wrapper">
    <video id="myvid" width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
    </video>

    <div id="group1">
        <button onclick="one()">one</button>
        <button onclick="two()">two</button>
        <button onclick="three()">three</button>
    </div>

</div>

Вот мой javascript:

var video = document.getElementById("myvid");
var button = document.querySelector("button"); //tried changing to #group1 but it still does the exact same as "button"

video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 5 && this.currentTime <= 6) { 
    this.pause();
    button.style = "display: block";
    }
});

Вот мой CSS:

#group1 {
    position: absolute;
    top: 40px;
}

Я имел"дисплей: нет;"внутри # group1, и это не позволяет отображать кнопки, но тогда я не могу понять в своем javascript, как отображать его, когда видео останавливается.

Answer 1

document.querySelector выберет только первый элемент.Вы можете использовать document.getElementsByClassName.

Добавить класс к каждой кнопке

    <button class="myclass" onclick="one()">one</button>
    <button class="myclass" onclick="two()">two</button>
    <button class="myclass" onclick="three()">three</button>

Использовать селектор класса.

var button = document.getElementsByClassName("myclass");

Изменить стиль на всекнопки с петлей.

for (var i = 0; i < button.length; i++) {
    button[i].style = "display: block";
}

Answer 2

как сделать все кнопки невидимыми, пока видео не остановится через 5 секунд?

Добавить стиль по умолчанию с visibility: hidden к вашей группе кнопок.

#group1 {
  display: block;
  visibility: hidden;
}

По какой-то причине, когда я запускаю его, когда видео достигает 5 секунд, кнопки 2 и 3 переходят к следующей строке.Я не понимаю, почему он это делает.

В основном потому, что вы не применили CSS к своим кнопкам или ваша первая кнопка имеет стиль display:block.Поэтому придайте стиль display: inline-block всем вашим кнопкам.

#group1 button {
  display: inine-block;
}

И, нажав на кнопку, снова примените стиль visibility: hidden к вашему div.Так что все получилось бы.

проверь мой пример

var video = document.getElementById("myvid");
var btnGroup = document.querySelector("#btn-group");

video.addEventListener("timeupdate", function(){
    if(this.currentTime >= 5 && this.currentTime <= 6) { 
    	this.pause();
    	btnGroup.style.visibility = "visible";
    }
});

function one() {
	btnGroup.style.visibility = "hidden";
}

#btn-group {
  visibility : hidden;
}

<div id="wrapper">
    <video id="myvid" width="320" height="240" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

    <div id="btn-group">
        <button onclick="one()">one</button>
        <button onclick="two()">two</button>
        <button onclick="three()">three</button>
    </div>

</div>

Вы также можете использовать display: block и display: none.Если вы используете display, элемент не займет места.Если вы используете visibility: hidden, он по-прежнему будет занимать место на странице.

Answer 3

Вы можете использовать «document.querySelectorAll (« кнопка »)», но не «document.querySelector (« кнопка »)».