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

时间:2019-07-09 20:09:55

标签: html css html5-video

Video example

我的代码:

on stripSpaces(thisText)
    set tid to my text item delimiters
    set my text item delimiters to " "  -- break text at spaces
    set textParts to text items of thisText
    set my text item delimiters to ""  -- recombine text without spaces
    set strippedText to textParts as text
    set my text item delimiters to tid
    return strippedText
end stripSpaces

log stripSpaces("   spa     .          nish  . txt  ")

Insert a button to close the small video

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

1 个答案:

答案 0 :(得分:0)

您可以使用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>