兩列reveal.js演示文稿中的異步內容

Question

我想要一個 2 列的reveal.js 幻燈片，我可以在其中翻閱左側列 (ColA) 中的幻燈片，同時在右側列 (ColB) 中播放視頻。 幻燈片隨附視頻。

我已在此頁面上進行了布局，但 iframe/ColA 中的內容不夠大，無法閱讀。 我試過縮放它，但它縮放了整個包含的 div，使兩列重疊，並且不只是縮放 iframe 的內容。

另一種選擇是像平常一樣制作幻燈片，其中每張幻燈片都包含指向嵌入視頻的鏈接。 我擔心一旦頁面加載，每個嵌入式視頻都會立即播放，因為它是實時 stream - 似乎這可能會消耗大量處理能力，因為我的計算機嘗試以 30 種不同的方式播放相同的嵌入式實時 stream幻燈片。 從 Slide1 移動到 Slide2 時，嵌入的視頻是否停止？

完整的 git 存儲庫在這里。

Answer 1

由於多種原因，我認為 iframe 不會很好地工作：

• 您已經遇到的縮放問題。 眾所周知，iframe 難以擴展，因為在嵌入它們時必須對尺寸進行硬編碼。
• 嵌套的演示文稿將有自己的導航，因此不清楚在哪里進行演示文稿。

你也已經預料到了下一個問題——當把同一個視頻放在多張幻燈片上時，視頻確實會“重新啟動”——首先舊視頻會淡出，然后新副本會淡入。這是因為每張幻燈片都是它自己的——包含 HTML 元素。 所以這也不會做你想要的。

相反，我建議使用Fragments 。 片段是您可以在不更改整個幻燈片的情況下更改頁面上的單個元素的方式（通常用於使項目符號出現）。

在您的情況下，您可以使用 css 類fragment fade-in-then-out （使它們出現/消失）和r-stack （使它們彼此重疊）。 您可以在文檔的“布局”頁面上看到一個示例（第二個帶有貓圖片）。

如果您將所有子幻燈片作為片段，那么您可以將視頻正常嵌入右側，並且它將獨立於子幻燈片的變化進行播放。 通過最后一張子幻燈片后，演示文稿將轉到下一張真實幻燈片（停止視頻）。