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

在视频暂停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。所以它会让它成功。

检查我的例子

＆＃13;

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";
}

＆＃13;

#btn-group {
  visibility : hidden;
}

＆＃13;

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

＆＃13;

您还可以使用display: block和display: none。如果使用显示，则元素不会占用任何空间。如果您使用visibility: hidden，它将继续占用页面中的空格。

Answer 2

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

Answer 3

Inline Script将仅选择第一项。您可以使用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");

JavaScript / CSS - 覆盖视频的按钮

3 个答案: