我想要一个 2 列的reveal.js 幻灯片，我可以在其中翻阅左侧列 (ColA) 中的幻灯片，同时在右侧列 (ColB) 中播放视频。幻灯片附有视频。
我已将其布置在此页面上，但 iframe/ColA 中的内容不够大，无法阅读。我试过缩放它，但它会缩放整个包含的 div，使两列重叠，而不仅仅是缩放 iframe 的内容。
另一种选择是像往常一样制作幻灯片，其中每张幻灯片都包含指向嵌入视频的链接。我担心的是，一旦页面加载，每个嵌入的视频都会立即播放，因为它是实时流 - 似乎这可能会消耗大量处理能力，因为我的计算机试图以 30 个不同的方式播放相同的嵌入实时流幻灯片。从 Slide1 移动到 Slide2 时，嵌入的视频是否停止？
完整的 git repo 在这里。
由于多种原因，我认为 iframe 不会很好地工作：
您也已经预料到下一个问题 - 当将相同的视频放在多张幻灯片上时，视频确实会“重新启动” - 首先旧视频会淡出，然后新副本会淡入。这是因为每张幻灯片都是它自己的 -包含 HTML 元素。所以这也不会做你想做的。
相反，我建议使用Fragments。片段是您可以在不更改整个幻灯片的情况下更改页面上的单个元素的方式（通常用于显示项目符号）。
在您的情况下，您可以将左侧的“子幻灯片”实现为使用 css 类fragment fade-in-then-out（使它们出现/消失）和r-stack（使它们彼此重叠）出现在彼此之上的单个片段。您可以在文档的“布局”页面上看到一个示例（第二个带有猫图片）。
如果您将所有子幻灯片都作为片段放置，那么您只需将视频正常嵌入右侧，它就会独立于子幻灯片的变化而播放。通过最后一个子幻灯片后，演示文稿将转到下一张真正的幻灯片（停止播放视频）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句