如何让视频在进入视区时播放

如何当视频进入视口时自动播放

当视频进入 Framer 页面的可视区域时自动播放,这一过程非常简单,无需任何代码即可实现。

设置视频自动播放的步骤

  1. 添加视频组件:将视频组件拖拽到页面上。选中它并按下 ⌥ ⌘ K(Ctrl Shift K)将其包裹在组件中。这样你就可以为视频创建不同的状态。

  2. 创建变体

    • 在组件中创建两个变体。

    • 将第一个变体命名为“Paused”,并在属性面板中将视频设置为“Playing: No”

    • 将第二个变体命名为“Playing”,并在属性面板中将视频设置为“Playing: Yes”

  3. 设置滚动变体效果

    • 返回主页面并选择视频组件。

    • 在属性面板中,添加一个滚动变体效果。

    • 将触发条件设置为“Layer in View”,以便在视频进入视口时激活效果。

    • 将效果配置为“From: Paused”“To: Playing”,使视频进入视野时切换状态。

现在,当视频进入视口时会自动播放。

重要提示

按照这些步骤操作,你就可以为 Framer 项目添加可交互的自动播放视频。

问题仍未解决?请通过我们的 联系页面 与我们联系以获取更多帮助。

Create a free website with Framer, the website builder loved by startups, designers and agencies.