使用视频创建原型

您可以为视频选择预设或自定义播放选项，并定义其他交互如何作用于该视频。在探索视频播放选项和交互时，请查看一些与视频相关的原型制作逼真示例。

开始之前

了解如何导入视频并调整设置。

设置播放选项

播放选项及其关联的交互

在“设计”模式下设置视频的播放选项时，将自动在“原型”模式下设置关联的交互。

点击播放

在选择点击播放时，将自动设置点击触发器，其默认操作为切换播放/暂停。

自动播放

当选择自动播放时，时间触发器会自动设置为 0 秒延迟。

不播放

当选择不播放时，将不会在“原型”模式下创建任何交互。

自定义视频播放

在“原型”模式下，可选择以下这些自定义的任何一个：

您不能将视频设置为使用“拖动”触发器播放。

将视频播放与其他交互结合使用

了解交互和视频播放行为

根据您为其他对象设置的交互，您的视频将停止或继续播放：

• 在触发自动制作动画和 Lottie 播放以外的操作时，视频将停止播放。
• 如果您希望在将鼠标悬停在其他对象上或点击其他对象时，视频继续播放，请使用自“动制作动画”作为“悬停”和“点击”触发器的操作。

“视频”和“时间”触发器

在任意给定的画板上：

• 您可以拥有多个“时间”触发器，这些触发器按其时间延迟排序。
• 您可以将一个视频和多个 Lottie 动画设置为在同一时间延迟后一起播放。还可以将它们设置为一起自动播放（时间延迟设置为 0 秒）。
• 如果在画板、视频和 Lottie 上设置具有相同时间延迟的“时间”触发器，则优先级为：“画板”>“视频”>“Lottie”。

原型制作示例

现在您已了解如何为视频设置播放选项并将它与其他交互连接，下面我们尝试一些示例。

示例 1：为视频的最大化按钮制作原型

了解如何为视频的最大化按钮制作原型。

Ex 1-artboard 1

1. 在“设计”模式中，导入"提示 1"视频，并将该视频放置在画板上。将视频设置为“点击播放”。
2. 将“最大化”图标（包含在画板右侧的“图标”部分中）放置在视频的右下角。 
3. 在“原型”模式中，将“最大化”图标连接到 Ex 1-artboard 2，并将它设置为“点击”触发器且“操作类型”为“自动制作动画”。

Ex 1-artboard 2

1. 在“设计”模式中，导入"提示 1"视频，并将该视频放置在画板上（全屏视频）。将视频设置为“点击播放”。
   
2. 将“最小化”图标（包含在“图标”部分中）放置在视频的右下角。 
3. 在“原型”模式中，将“最小化”图标连接到 Ex 1-artboard 1，同时将它设置为“点击”触发器，并将“操作类型”设置为“自动制作动画”。
   

在连接完交互后，预览原型并检查交互。

示例 2：原型播放

了解如何在 XD 中连续播放视频。

Ex 2-artboard 1

1. 在“设计”模式中，导入“简介”视频，并将该视频放置在“简介”部分中。将视频设置为“不播放”。
   
2. 导入“提示 1”和“提示 2”视频，并将它们放置在“提示”部分中。将视频设置为“不播放”。
3. 在所有视频上放置“播放”按钮的副本（包含在“图标”部分中）。
4. 在“原型”模式中：

• 将“简介”视频上的“播放”按钮连接到 Ex 2-artboard 2。
  
• 将“提示 1”视频上的“播放”按钮连接到 Ex 2-artboard 3。
  
• 将“提示 2”视频上的“播放”按钮连接到 Ex 2-artboard 4。 

将视频全部设置为“点击”触发器，并将“操作类型”设置为“过渡”。

Ex 2-artboard 2

1. 在“设计”模式中，导入“简介”视频，并将该视频放置在“提示”部分的上方。将视频设置为“自动播放”。
2. 在“原型”模式中，将视频连接到 Ex 2-artboard 3，同时将它设置为“播放结束”触发器，并将“操作类型”设置为“过渡”。
   

Ex 2-artboard 3

1. 在“设计”模式中，导入“提示 1”视频，并将该视频放置在“提示 1”部分的上方。将视频设置为“自动播放”。
   
2. 在“原型”模式中，将视频连接到 Ex 2-artboard 4，同时将它设置为“播放结束”触发器，并将“操作类型”设置为“过渡”。
   

Ex 2-artboard 4

1. 在“设计”模式中，导入“提示 2”视频，并将该视频放置在“提示 2”部分的上方。将视频设置为“自动播放”。
2. 在“原型”模式中，将视频连接到 Ex 2-artboard 1，同时将它设置为“播放结束”触发器，并将“操作类型”设置为“过渡”。
   

在连接完交互后，预览原型并检查交互。

更多示例

探索与视频、Lottie 动画和组件状态相关的更多示例。

更多示例

了解详情

观看这段为时 2 分钟的视频，了解有关在 XD 中使用视频的一些专业技巧。

相关资源

• 创建交互式原型
  
• 使用语音命令和语音播放创建原型
  
• 使用 Lottie 动画

有疑问或想法？