时间戳

首页 > 解决方案 > 视频控制按钮不工作和 CSS 不更新按钮

html - 视频控制按钮不工作和 CSS 不更新按钮

问题描述

破败不堪

所以我有一个要播放的全屏视频，我尝试执行以下操作：
自动播放 - 仅在 10% 的情况下有效
按钮：按钮不可点击，不会根据 css 更新（我的问题）

我正在尝试实现的目标
我正在尝试制作 - 按钮进入显示“单击此处进入站点”的中心，单击它后，视频将播放，按钮将消失。

HTML

<head>

    <title>Spiccy</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
    
<body>

    <button type="button" onclick="playVideo()" type="button">Click to enter</button>

    <video id="myVid">
        <source src="enter.mp4" type="video/mp4">
        Sorry, your browser does not support HTML5 video.
    </video>
    <script>
        var myVideo = document.getElementById("myVid");
        function playVideo() {
            myVideo.play();
        }
    </script>


</body>





<body>
    <div class="wrapper">
        <pre>                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                      
   SSSSSSSSSSSSSSS                      iiii                                                                           SSSSSSSSSSSSSSS                                                                 ffffffffffffffff               
 SS:::::::::::::::S                    i::::i                                                                        SS:::::::::::::::S                                                               f::::::::::::::::f              
S:::::SSSSSS::::::S                     iiii                                                                        S:::::SSSSSS::::::S                                                              f::::::::::::::::::f             
S:::::S     SSSSSSS                                                                                                 S:::::S     SSSSSSS                                                              f::::::fffffff:::::f             
S:::::S           ppppp   ppppppppp   iiiiiii     cccccccccccccccc    ccccccccccccccccyyyyyyy           yyyyyyy     S:::::S               mmmmmmm    mmmmmmm   uuuuuu    uuuuuu rrrrr   rrrrrrrrr    f:::::f       ffffffssssssssss   
S:::::S           p::::ppp:::::::::p  i:::::i   cc:::::::::::::::c  cc:::::::::::::::c y:::::y         y:::::y      S:::::S             mm:::::::m  m:::::::mm u::::u    u::::u r::::rrr:::::::::r   f:::::f           ss::::::::::s  
 S::::SSSS        p:::::::::::::::::p  i::::i  c:::::::::::::::::c c:::::::::::::::::c  y:::::y       y:::::y        S::::SSSS         m::::::::::mm::::::::::mu::::u    u::::u r:::::::::::::::::r f:::::::ffffff   ss:::::::::::::s 
  SS::::::SSSSS   pp::::::ppppp::::::p i::::i c:::::::cccccc:::::cc:::::::cccccc:::::c   y:::::y     y:::::y          SS::::::SSSSS    m::::::::::::::::::::::mu::::u    u::::u rr::::::rrrrr::::::rf::::::::::::f   s::::::ssss:::::s
    SSS::::::::SS  p:::::p     p:::::p i::::i c::::::c     cccccccc::::::c     ccccccc    y:::::y   y:::::y             SSS::::::::SS  m:::::mmm::::::mmm:::::mu::::u    u::::u  r:::::r     r:::::rf::::::::::::f    s:::::s  ssssss 
       SSSSSS::::S p:::::p     p:::::p i::::i c:::::c             c:::::c                  y:::::y y:::::y                 SSSSSS::::S m::::m   m::::m   m::::mu::::u    u::::u  r:::::r     rrrrrrrf:::::::ffffff      s::::::s      
            S:::::Sp:::::p     p:::::p i::::i c:::::c             c:::::c                   y:::::y:::::y                       S:::::Sm::::m   m::::m   m::::mu::::u    u::::u  r:::::r             f:::::f               s::::::s   
            S:::::Sp:::::p    p::::::p i::::i c::::::c     cccccccc::::::c     ccccccc       y:::::::::y                        S:::::Sm::::m   m::::m   m::::mu:::::uuuu:::::u  r:::::r             f:::::f         ssssss   s:::::s 
SSSSSSS     S:::::Sp:::::ppppp:::::::pi::::::ic:::::::cccccc:::::cc:::::::cccccc:::::c        y:::::::y             SSSSSSS     S:::::Sm::::m   m::::m   m::::mu:::::::::::::::uur:::::r            f:::::::f        s:::::ssss::::::s
S::::::SSSSSS:::::Sp::::::::::::::::p i::::::i c:::::::::::::::::c c:::::::::::::::::c         y:::::y              S::::::SSSSSS:::::Sm::::m   m::::m   m::::m u:::::::::::::::ur:::::r            f:::::::f        s::::::::::::::s 
S:::::::::::::::SS p::::::::::::::pp  i::::::i  cc:::::::::::::::c  cc:::::::::::::::c        y:::::y               S:::::::::::::::SS m::::m   m::::m   m::::m  uu::::::::uu:::ur:::::r            f:::::::f         s:::::::::::ss  
 SSSSSSSSSSSSSSS   p::::::pppppppp    iiiiiiii    cccccccccccccccc    cccccccccccccccc       y:::::y                 SSSSSSSSSSSSSSS   mmmmmm   mmmmmm   mmmmmm    uuuuuuuu  uuuurrrrrrr            fffffffff          sssssssssss    
                   p:::::p                                                                  y:::::y                                                                                                                                   
                   p:::::p                                                                 y:::::y                                                                                                                                    
                  p:::::::p                                                               y:::::y                                                                                                                                     
                  p:::::::p                                                              y:::::y                                                                                                                                      
                  p:::::::p                                                             yyyyyyy                                                                                                                                       
                  ppppppppp                                                                                                                                                                                                           
                                                                                                                                                                                                                                    

</pre>
</div>
</body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    background-color: black;
    overflow: hidden;
    font-family: "Brandon Light";
    color: white;
    user-select: none;
}
.wrapper{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        
}

pre {
    margin: 0;
    padding: 0;
    padding-bottom: 550px;
    text-align: center;
    color: transparent;
    background-image: linear-gradient(to left, #f00, #ff0, #0ff, #0f0, #00f);
    -webkit-background-clip: text;
    animation: animate 5s linear infinite;
    -webkit-background-size: 500%;
    background-size: 500%;
    outline: 5;
}
@keyframes animate{
    0%
    {
        background-position: 0% 100%;
    }
    50%
    {
        background-position: 100% 0%;
    }
    100%
    {
        background-position: 0% 100%;
    }
}


#myVid {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    opacity: 0.4;
}

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 3px solid green;
}

标签： htmlcsshtml5-video

解决方案

该按钮应该有一个具有绝对位置的类，因此它将位于视频的顶部，另外您可以使用一些DIV来确保该按钮将是视频顶部的一个图层。

您正在寻找的答案在这里：如何让 div 出现在另一个前面？

推荐阅读