css - 无法隐藏播放列表 html 视频

Question

得到了这个脚本并且它工作正常，问题是它显示了播放列表中的视频，我试过可见性:隐藏;并显示:无；它不起作用，有人知道如何隐藏它吗？

var video_player = document.getElementById("video_player");
video = video_player.getElementsByTagName("video")[0],
  video_links = video_player.getElementsByTagName("figcaption")[0],
  source = video.getElementsByTagName("source"),
  link_list = [],
  vidDir = "http://demosthenes.info/assets/videos/",
  currentVid = 0,
  allLnks = video_links.children,
  lnkNum = allLnks.length;
video.removeAttribute("controls");
video.removeAttribute("poster");

(function() {
  function playVid(index) {
    video_links.children[index].classList.add("currentvid");
    source[1].src = vidDir + link_list[index] + ".webm";
    source[0].src = vidDir + link_list[index] + ".mp4";
    currentVid = index;
    video.load();
    video.play();
  }

  for (var i = 0; i < lnkNum; i++) {
    var filename = allLnks[i].href;
    link_list[i] = filename.match(/([^\/]+)(?=\.\w+$)/)[0];
    (function(index) {
      allLnks[i].onclick = function(i) {
        i.preventDefault();
        for (var i = 0; i < lnkNum; i++) {
          allLnks[i].classList.remove("currentvid");
        }
        playVid(index);
      }
    })(i);
  }
  video.addEventListener('ended', function() {
    allLnks[currentVid].classList.remove("currentvid");
    if ((currentVid + 1) >= lnkNum) {
      nextVid = 0
    } else {
      nextVid = currentVid + 1
    }
    playVid(nextVid);
  })

  video.addEventListener('mouseenter', function() {
    video.setAttribute("controls", "true");
  })

  video.addEventListener('mouseleave', function() {
    video.removeAttribute("controls");
  })

  var indexOf = function(needle) {
    if (typeof Array.prototype.indexOf === 'function') {
      indexOf = Array.prototype.indexOf;
    } else {
      indexOf = function(needle) {
        var i = -1,
          index = -1;
        for (i = 0; i < this.length; i++) {
          if (this[i] === needle) {
            index = i;
            break;
          }
        }
        return index;
      };
    }
    return indexOf.call(this, needle);
  };
  var focusedLink = document.activeElement;
  index = indexOf.call(allLnks, focusedLink);

  document.addEventListener('keydown', function(e) {
    if (index) {
      var focusedElement = document.activeElement;
      if (e.keyCode == 40 || e.keyCode == 39) { // down or right cursor
        var nextNode = focusedElement.nextElementSibling;
        if (nextNode) {
          nextNode.focus();
        } else {
          video_links.firstElementChild.focus();
        }
      }
      if (e.keyCode == 38 || e.keyCode == 37) { // up or left cursor
        var previousNode = focusedElement.previousElementSibling;
        if (previousNode) {
          previousNode.focus();
        } else {
          video_links.lastElementChild.focus();
        }
      }
    }
  });

})();

#video_player {
  display: table;
  line-height: 0;
  max-width: 100%;
  margin: 0 auto;
}
#video_container {
  position: relative;
}
#video_player div,
#video_player figcaption {
  display: table-cell;
  vertical-align: top;
}
#video_container video {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
}
#video_player figcaption {
  width: 25%;
}
#video_player figcaption a {
  display: block;
}
#video_player figcaption a {
  opacity: .3;
  transition: 1s opacity;
}
#video_player figcaption a img,
figure video {
  width: 100%;
  height: 100%;
}
#video_player figcaption a.currentvid,
#video_player figcaption a:hover,
#video_player figcaption a:focus {
  opacity: 1;
}

<figure id="video_player">
  <div id="video_container">
    <video controls poster="vid-glacier.jpg" autostart>
      <source src="http://thenewcode.com/assets/videos/glacier.webm" type="video/webm" autostart>
        <source src="http://thenewcode.com/assets/videos/glacier.mp4" type="video/mp4" autostart>
    </video>
  </div>
  <figcaption>
    <a href="http://thenewcode.com/assets/videos/lake.mp4" class="currentvid">
      <img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
    </a>
    <a href="http://thenewcode.com/assets/videos/mountain.mp4">
      <img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
    </a>
    <a href="http://thenewcode.com/assets/videos/glacier.mp4">
      <img src="http://demosthenes.info/assets/images/vid-glacier.jpg" alt="Athabasca Glacier">
    </a>
  </figcaption>
</figure>

提前致谢

Answer 1

好的，这个 CSS 应该适合你。我已经标记了所有重要的元素。但在我们开始之前，让我们看看哪里出了问题。这是你拥有的:

#video_container video {position: absolute; top: 0;}
#video_player figcaption {width: 25%;}

position 及其top 代码覆盖了隐藏播放列表的所有形式。即使 #video_player figcaption 设置为 display: none; 或 visibility: hidden; 这对隐藏播放列表没有影响，因为 宽度:25%；。宽度覆盖了 display/visibility，我们都知道 display: none; 应该覆盖所有内容。但是宽度仍然可见，因为来自 #video_container video 的 position: absolute; 说“我不在乎其他所有内容，你保持原样”。这些东西已经修好了。要使用的正确 CSS 如下。

#video_player {display: table;
               margin: auto;
               background: #000000;
               width: 500px; /*The space you want occupied.*/
}

#video_container {position: relative;}

#video_player div, #video_player figcaption {display: table-cell; vertical-align: top;}

#video_container video {display: block;
                        width: 100%; /*How big you want the video to be.*/
                        height: ---; /*Whatever you want*/
                        /*width: 350px;*/ /*Use with visible playlist.*/
                        /*height: 100%;*/ /*Use with visible playlist.*/
}

#video_player figcaption {display: none; /*Hides the playlist from view.*/
}

#video_player figcaption a {display: block; opacity: .3; transition: 1s opacity;}
#video_player figcaption a img {width: 100%;}
#video_player figcaption a.currentvid, #video_player figcaption a:hover, #video_player figcaption a:focus {opacity: 1;}