popcornjs - 在 div 中隐藏爆米花元素

Question

因此，使用 popcorn.js，您可以指定脚注等将填充的 div。但是，如果您有多个视频对所述脚注使用相同的 div，但是，当您在弹出脚注的同时切换视频时，它会保留在 div 中，并且下一个元素将放置在其下方，而不是替换它。我不能使用 .html(' ') 因为所有元素实际上总是在那里，只是按顺序显示和隐藏。也无法隐藏整个 div。想法？

Answer 1

至少有几种方法可以做到这一点。

一种选择是在同一个 div 中创建两个 div，每个 div 具有 CSS 样式，position: absolute父 div 具有position: relative. 这两个 div 将相互重叠，您可以让每个 div 成为不同 Popcorn 实例中所有脚注的目标。当您在两个视频之间切换时，display: none为隐藏视频设置 div 并为可见视频清除它。

我经常使用的另一个技巧是使用.disable. 这将隐藏该爆米花实例的所有脚注。像这样的东西：

function activateVideo(index) {
  if (activePopcorn) {
      activePopcorn.disable('footnote');
      //todo: make this video invisible.
  }

  activePopcorn = popcornInstances[index];
  activePopcorn.enable('footnote');
  //todo: make this video visible.
  //(don't forget to range check)
}

如果需要，您可以通过循环禁用/启用所有插件Popcorn.registryByName。