如何添加按钮以关闭此视频播放器代码答案

【问题标题】：How to add a button to close this video player code如何添加按钮以关闭此视频播放器代码
【发布时间】：2019-07-09 20:09:55
【问题描述】：

Video example

我的代码：

<style type="text/css">       
    #Video1
     {
     position:;
     top: 50px;
     left:10px;        
     width:500px;       
     border:0px solid blue;
     display:block;
     z-index:99;
     }
        
        
   #Video2
     {

     position:absolute;
     top: 70px;
     left:120px;
     width:200px;
     border:0px solid red;        
     z-index:100;
     
    }
</style>
</head>
    <body>        
     

<center> <video id="Video1" controls loop autoplay >
<source src="https://lh3.googleusercontent.com/orPU3x-H8_xqOJ-CoVw-fyBKqdngFrL7g3YJD6j4tUbZO5mLMC15cn
5aKQBd0kIhNvt3NKomiPU9EHv_tKYvfNKwJ1-hvmKEX-ldqCmwNeq_VtQYVeMEmylhFAq9vND_EhHbYO5iYg=m18" type="video/mp4" />        
       </video></center>
       
      


<center><video id="Video2" muted autoplay controls  button >

           
<source src="https://lh3.googleusercontent.com/orPU3x-H8_xqOJ-CoVw-fyBKqdngFrL7g3YJD6j4tUbZO5mLMC15cn
5aKQBd0kIhNvt3NKomiPU9EHv_tKYvfNKwJ1-hvmKEX-ldqCmwNeq_VtQYVeMEmylhFAq9vND_EhHbYO5iYg=m18"  type="video/mp4" />

    HTML5 Video not supported
       
      </video></center>

Insert a button to close the small video

我无法实现此按钮。也许我没有使用正确的 HTML，或者我的 CSS 错误。

【问题讨论】：

关闭按钮到底是什么意思？目前有暂停按钮吗？
一个按钮隐藏较少的视频，让它不可见，我用它标记视频 + button.close 不起作用
如何在 CSS 代码 # Video2 中实现按钮关闭元素？
您好，您能否添加更多信息来解释您的代码示例，以及您要执行的操作、当前行为以及您尝试过的操作？这将有助于吸引可以回答您问题的人，并为他们提供一些背景知识，以便他们知道您要完成的工作。这是一个描述如何提出好问题的链接：stackoverflow.com/help/how-to-ask。感谢并享受该网站
你真的试过放一个关闭按钮吗？这个 HTML/CSS sn-p 不包含任何类型的关闭按钮。请注意，您必须尝试实现此功能，因为我们无法为您编写代码。请更新您的问题以包含您为关闭按钮尝试的代码以获得进一步的调试帮助。

标签： html css html5-video

【解决方案1】：

您可以使用display: none; 关闭视频。查看更多关于显示属性的信息：https://www.w3schools.com/cssref/pr_class_display.asp

HTML：

<button id="CloseButton" onclick="closeVideo()" > x </button>

JS：

closeVideo = function() {
     document.getElementById('Video2').style.display ='none';
     document.getElementById('CloseButton').style.display ='none';
}

您提供的按钮工作的代码段：

<head>
    <style type="text/css">       
       #Video1 {
       position:;
       top: 50px;
       left:10px;        
       width:500px;       
       border:0px solid blue;
       display:block;
       z-index:99;
    }
             
    #Video2 {
       position:absolute;
       top: 70px;
       left:120px;
       width:200px;
       border:0px solid red;        
       z-index:100;
    }

    #CloseButton {
       color:red;
       position:absolute;
       top:80px;
       left:310px;
       width:20px;
       height:20px;
       z-index:200;
       text-align:center;
    }
  </style>

  <script>
      closeVideo = function() {
          document.getElementById('Video2').style.display ='none';
          document.getElementById('CloseButton').style.display ='none';
      }
  </script>

</head>

<body>              
    <button id="CloseButton" onclick="closeVideo()" > x </button>
    <center>
        <video id="Video1" controls loop autoplay >
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />        
        </video>
    </center>
       
    <center>
        <video id="Video2" muted autoplay controls  button >
        <source src="https://www.w3schools.com/html/mov_bbb.mp4"  type="video/mp4" />

        HTML5 Video not supported
        </video>
    </center>
</body>

【讨论】：