Как добавить кнопку, чтобы закрыть этот код видео плеер - PullRequest
Новая
       15

Как добавить кнопку, чтобы закрыть этот код видео плеер

0 голосов
/ 09 июля 2019

Пример видео

Мой код: 

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

Вставить кнопку, чтобы закрыть небольшое видео

Я не могу реализовать эту кнопку.Возможно, я не использую правильный HTML, или мой CSS неправильный.

1 Ответ

0 голосов
/ 10 июля 2019

Вы можете использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...