使用JavaScript和Vue.js生成令人敬畏的幻灯片

介绍

正如我之前在Faveeo写的那样，我们正在努力从策划文章中制作原创内容。团队的一个想法是从书面文章中制作视频，以最大限度地提高读者的参与度，并生成新鲜，易于理解的材料。

我不得不探索以编程方式制作视频的解决方案和我想出的一个解决方案，即构建有吸引力的幻灯片。幻灯片必须具有足够的吸引力，以吸引读者并给他们留下他们正在观看视频的印象。

通过团队，我们探索了几种解决方案：

• 使用JS生成幻灯片并记录它们。
• 使用ffmpeg 和以编程方式构建视频 imagemagick。
• 探索可用的SaaS平台来编写我们的视频。
• 生成Adobe Premiere兼容格式。

长话短说，除了第一个解决方案外，所有解决方案都成了噩梦。

我一直在使用两个框架来构建我的幻灯片，我保留了Eagle.js

Reveal.js

Reveal.js是一个很酷的框架，允许用户使用HTML / CSS和一些JavaScript来构建自己的幻灯片。为了帮助初学者，它在https://slides.com/上提供了一个在线编辑器。

这篇文章不是教程，因此，这是我对我的用例的反馈。

好吧，Reveal.js非常受欢迎，很容易在网上找到很多例子。

WTF：我们如何开始？

我第一次使用Reveal.js时有这种反应，直到我明白我必须克隆一个git项目来创建我的第一个模板。我遇到的第二个问题是找不到代码，直到我发现单个HTML页面包含幻灯片放映的所有代码。

丰富的功能和出色的文档

Reveal.js有一系列令人印象深刻的功能，自动播放，录音，音频等等，它对大多数人来说都是完美的。

文档也很棒，你会发现很多例子。

解决方案的缺点

Reveal.js有一些缺点：

• 它是纯粹的，香草的JS，虽然我能够使它与Vue.js友好，但它一直非常hacky。
• 当幻灯片出现时，我无法触发文本动画。
• 我必须在生成新幻灯片后重新启动组件，因为我无法控制Reveal.js生命周期。