JavaScript/CSS-覆盖视频的按钮

我创建了一个简单的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>

---

我在#group1中有“display:none；”，这不允许显示按钮，但我无法在javascript中找到视频暂停时如何显示按钮

您可以使用“document.queryselectoral（“button”）”但不能使用“document.querySelector（“button”）。

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>

如何使所有按钮在视频暂停5秒之前不可见

在按钮组中添加一个具有

可见性：隐藏的默认样式

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

出于某种原因，当我运行它时，当视频点击5秒时，按钮2和3跳到下一行。我不明白它为什么这么做

这主要是因为，您没有对按钮应用任何CSS，或者您的第一个按钮的样式为
display:block
。因此，为所有按钮指定样式
display:inline block

#group1 button {
  display: inine-block;
}

单击按钮，再次将style
visibility:hidden
应用于div，这样它就可以运行了

看看我的例子


var video=document.getElementById（“myvid”）；
var btnGroup=document.querySelector（“btn组”）；
video.addEventListener（“时间更新”，函数（）{
如果（this.currentTime>=5&&this.currentTime所以基本上你只抓取第一个按钮，如果你将“按钮”更改为
#group1
，会发生什么？你要做的是将按钮更改为#group1，然后在#group1样式中将显示设置为none@JuvenileSnow我试过将“按钮”改为“组1”设置我的显示：无，但无任何更改：（您也使用了错误的样式，请尝试此按钮。style.display='block'；
for (var i = 0; i < button.length; i++) {
    button[i].style = "display: block";
}

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

#group1 button {
  display: inine-block;
}