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

Question

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

我已将它放在this page 上，但 iframe/ColA 中的内容不够大，无法阅读。我试过缩放它，但它会缩放整个包含的 div，使两列重叠，而不仅仅是缩放 iframe 的内容。

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

完整的 git repo 是 here。

Answer 1

由于多种原因，我认为 iframe 不能很好地工作：

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

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

相反，我建议使用Fragments。片段是您可以在不更改整个幻灯片的情况下更改页面上的单个元素的方式（通常用于显示项目符号）。

在您的情况下，您可以使用 css 类 fragment fade-in-then-out（使它们出现/消失）和 r-stack（使它们出现在彼此之上）。您可以在文档中的"Layout" 页面上看到一个示例（第二个带有猫图片的页面）。

如果您将所有子幻灯片都作为片段放置，那么您可以将视频正常嵌入到右侧，并且它将独立于子幻灯片的变化进行播放。通过最后一张子幻灯片后，演示文稿将转到下一张真实幻灯片（停止视频）。