如何当视频进入视口时自动播放
当视频进入 Framer 页面的可视区域时自动播放,这一过程非常简单,无需任何代码即可实现。
设置视频自动播放的步骤
添加视频组件:将视频组件拖拽到页面上。选中它并按下 ⌥ ⌘ K(Ctrl Shift K)将其包裹在组件中。这样你就可以为视频创建不同的状态。
创建变体:
在组件中创建两个变体。
将第一个变体命名为“Paused”,并在属性面板中将视频设置为“Playing: No”。
将第二个变体命名为“Playing”,并在属性面板中将视频设置为“Playing: Yes”。
设置滚动变体效果:
返回主页面并选择视频组件。
在属性面板中,添加一个滚动变体效果。
将触发条件设置为“Layer in View”,以便在视频进入视口时激活效果。
将效果配置为“From: Paused” 和 “To: Playing”,使视频进入视野时切换状态。
现在,当视频进入视口时会自动播放。
重要提示
只有静音的视频才能在浏览器中自动播放。浏览器会阻止未静音视频的自动播放,因此请确保你的视频已设置为静音。
如需实际示例和教程,请查看 Framer 视频自动播放示例 或 Framer 上的 Topbar 动画。
按照这些步骤操作,你就可以为 Framer 项目添加可交互的自动播放视频。
问题仍未解决?请通过我们的 联系页面 与我们联系以获取更多帮助。