两列 reveal.js 表示中的异步内容

asynchronus content in two-column reveal.js presentation

我想要一个 2 栏 reveal.js 幻灯片,我可以在其中翻阅左侧栏 (ColA) 中的幻灯片,同时在右侧栏 (ColB) 中播放视频。幻灯片随视频一起播放。

我已经在 this page 上进行了布局,但是 iframe/ColA 中的内容不够大,无法阅读。我试过缩放它,但它缩放整个包含 div,使两列重叠,而不只是缩放 iframe 的内容。

另一种选择是像往常一样制作幻灯片,其中每张幻灯片都包含一个 link 嵌入视频。我担心的是,每一个嵌入式视频都会在页面加载后立即播放,因为它是实时流——这似乎会消耗大量处理能力,因为我的计算机试图以 30 种不同的方式播放相同的嵌入式实时流幻灯片。从 Slide1 移动到 Slide2 时,嵌入的视频是否停止?

完整的 git 存储库是 here

由于多种原因,我认为 iframe 不会很好地工作:

  • 您已经遇到的缩放问题。众所周知,iframe 很难扩展,因为在嵌入它们时必须对大小进行硬编码。
  • 嵌套演示文稿将有自己的导航,因此不清楚从何处继续演示文稿。

您也已经预料到下一个问题 - 当将同一视频放在多张幻灯片上时,视频确实会“重新开始” - 首先旧视频会淡出,然后新副本会淡入。这是因为每张幻灯片是它自己的独立 HTML 元素。所以这也不会如你所愿。

相反,我建议使用 Fragments。片段是您可以在不改变整张幻灯片的情况下更改页面上的单个元素的方式(通常用于显示要点)。

在您的情况下,您可以将左侧的“子幻灯片”实现为使用 css 类 fragment fade-in-then-out(使它们 appear/disappear) 和 r-stack(使它们出现在彼此之上)。您可以在文档的 "Layout" 页面上查看示例(第二个带有猫图片的页面)。

如果您将所有的子幻灯片作为片段,那么您可以像往常一样将视频嵌入右侧,并且它会独立于子幻灯片的变化而播放。一旦最后一张子幻灯片通过,演示文稿将移至下一张真正的幻灯片(停止视频)。