在CMS页面添加视频组件

在CMS页面中添加视频组件

了解如何在 Framer 的 CMS 详情页面中添加视频,并使用 CMS 变量和条件控制其动态显示。

你可以将来自 YouTube、Vimeo 或自建托管的视频嵌入到 CMS 详情页中,也可以直接将视频上传至你的 CMS。你还可以为没有视频的项目隐藏空白的视频区域。

添加视频的选项

你可以通过以下几种方式向 CMS 详情页添加视频:

  • YouTube 组件

  • Vimeo 组件

  • 自托管视频

  • 已上传的视频

添加 YouTube、Vimeo 或自托管视频

此方法允许你使用视频 URL 显示外部托管的视频。

  1. 在你的 CMS 集合中创建一个视频 URL字段。使用纯文本字段类型。

  2. 为每个 CMS 项目在此字段中添加视频 URL。没有视频的项目可留空。

  3. 在你的 CMS 详情页上插入一个 YouTube、Vimeo 或视频组件。在 URL 字段中,点击+按钮,选择设置变量,然后从你的 CMS 字段中选择视频 URL

Framer 的 YouTube 组件设置面板,展示如何连接 CMS 视频 URL 变量。界面显示了包含不透明度和可见性控件的样式部分,随后是 YouTube 组件设置,用户可以从下拉菜单中选择“设置变量”以连接其 CMS 集合中的“视频 URL”字段。

直接在 CMS 中上传视频

此方法将视频文件存储在你的 CMS 中,以便无需外部托管即可播放。

  1. 在你的 CMS 集合中添加一个文件字段。该字段支持 MP4 等格式。

  2. 将你的视频文件上传到 CMS。请注意上传大小限制。

  3. 在你的 CMS 详情页上插入一个视频组件。将源设置为上传,点击+按钮,选择设置变量,然后从你的 CMS 字段中选择文件

Framer 视频组件设置面板的截图。界面显示了一个视频组件,其源类型已选择为“上传”。下方有一个“文件”字段,带有“设置变量”按钮和用于选择 CMS 变量的下拉菜单。面板还显示了封面图、圆角、开始时间、循环设置和适配模式等选项。这说明了如何在 Framer 中将 CMS 文件字段连接到视频组件。

隐藏空白字段

对于没有视频的项目,你可以使用条件判断来保持布局整洁。

  1. 样式面板中,前往可见性 > 设置变量 > 视频 URL/文件 > 已设置

  2. 这样可以确保仅当存在视频文件时,视频区域才可见。

Framer 样式面板的截图,展示如何为视频组件设置条件可见性。面板显示了“可见”选项,并已选择“设置变量”,其中“视频 URL”字段的“已设置”条件被高亮显示。这演示了如何使视频组件仅在 CMS 项目具有可用视频内容时才显示。

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