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;，这也不会因为width: 25%;而隐藏播放列表。宽度覆盖了display/visibility，我们都知道display: none;应该覆盖所有内容。但宽度仍然可见，因为来自position: absolute;的{{1}}说“我不关心其他所有内容，你会留下来”。这些事情已得到修复。正确使用的CSS如下所示。

#video_container video

Answer 2

新帖子：要隐藏当前视频，请查看#video_player figcaption a.currentvid ... a:focus。将opacity: 1;更改为opacity: 0;，添加visibility: hidden;（将隐藏该区域，但不删除其占用的空间），或添加display: none;（这是最佳解决方案）。如果您希望将播放列表显示在多个页面上，请确保每次都将class="currentvid"放入正确的<a>。

旧帖子：您需要将display: none;或display: none !important;添加到#video_container。问题是你可能会。要让display: none;正常工作，请将#video_container移到#video_container video下方。如果你想让一切都保持原样，那么使用display：none！important;`这将覆盖其他所有内容并隐藏你的视频。

#video_container {
  position: relative;
  display: none !important;
}

无法隐藏播放列表HTML视频

2 个答案: