如何在ProtoPie中制作功能性视频播放器

常见交互

如何在ProtoPie中制作功能性视频播放器

释放设计中媒体播放器的强大功能。

Khonok Lee, Head of Customer Learning

January 2, 2024

随着数字时代的不断发展，音乐和视频已经牢固地确立为我们主要的娱乐来源。当任务是设计围绕音频和视频体验的应用程序时，一个关键因素浮现出来：先进的原型设计。

考虑一下在我们屏幕上每天支配的应用程序：Netflix、Spotify、TikTok和Facebook。它们的核心是一个可靠的媒体播放器，具有基本功能，如播放、暂停、流畅的进度控制和精确的音量调整。

特别是在有了ProtoPie作为你可靠的伙伴之后，先进的原型设计变得比你想象的更加易于实现。在这个教程中，我们鼓励你站在领先的应用程序设计师的角度。我们将演示如何轻松塑造既引人入胜又适合初学者设计师的多媒体体验。

媒体播放器原型是如何工作的

虽然我们的演示重点放在了视频播放器上，但我们将涵盖的步骤同样适用于音频播放器。在深入细节之前，让我们快速了解一下你将能够创建的交互：

基础播放/暂停控制 — 你可以简单地点击播放/暂停按钮来开始或停止播放。或者，点击视频的任何地方都会实现相同的播放/暂停操作。
跟踪视频进度 — 为了导航视频的进度，你可以点击进度条上的任何点，或者拖动进度条本身。
音量控制 — 调整音量就像拖动音量滑块一样简单。值得注意的是，音量图标的外观会根据音量水平而自适应变化。或者，你可以直接点击音量按钮将视频静音。

开始之前

以下是你将学到的内容的概述。但在我们深入了解之前，让我们提升一下兴奋感。确保你已经在智能手机上安装并设置好了ProtoPie Player应用。这个应用是你测试和验证即将实现的令人印象深刻的媒体播放控件的关键！

下载下面的起始Pie文件，并在ProtoPie Studio中打开我们的媒体播放器原型。

媒体播放原型预览

无交互的源文件含交互的pie文件

准备好了吗？让学习开始吧！

使用ProtoPie创建交互式视频播放器

1. 在原型中使用视频

借助ProtoPie内置的媒体图层，你可以轻松地通过无缝的视频和音频集成增强你的原型。ProtoPie支持各种类型的媒体文件，包括：

.mp4（H.264）最大可达100 MB。
.wav、.mp3和.m4a
Lottie JSON

2. 从悬停效果开始

当你打开起始的 Pie 文件时，你会注意到模板中预先制作的一组交互。这些交互包括用于覆盖、按钮和各种功能的悬停效果，通过鼠标悬停和鼠标移出反应。如果你对这些功能还不熟悉。

让我们打开预览窗口，仔细看看你可以使用的功能：

在视频播放器上悬停会触发一个覆盖层，展示不同的功能。
每个功能，如播放/暂停和快进，都带有自己的悬停效果。
如果将鼠标光标移出视频播放器，只需等待3秒，覆盖层就会优雅地消失。

自动播放选项

3. 添加基础的播放与暂停控制按钮

当然，让我们首先配置原型，以便在加载时自动开始播放视频。我们可以通过对视频图层进行单一设置调整来实现这一点。

选择视频图层，然后转到其属性面板。在这里，启用“自动播放”选项。

自动播放选项

现在，当你打开预览时，你会注意到视频在加载完成后会自动开始播放。

💡 专业提示！ProtoPie在你进行编辑时会刷新预览窗口，这旨在帮助你方便地检查更新。然而，在处理媒体图层时，这可能导致频繁的刷新和声音重复播放。如果你更喜欢更受控制的体验，可以在预览窗口设置中禁用“自动重启”选项。

预览窗口设置中的自动重启功能

在我们的示例中，有两种不同的方法可以播放或暂停视频。第一种方法涉及使用专用的播放/暂停按钮，而第二种方法允许你通过单击视频的任何地方来执行相同的操作。

让我们从第一种方法开始 - 使用播放/暂停按钮。

为了简化交互过程，让我们确保叠加变得可见。找到“Overlay Functions Bottom”组，并将其透明度设置为100。这将使我们更容易找到所需的图层。

“overlay”功能

在图层面板中，找到一个名为“Play/Pause”的组。在这个组内，你会找到两个图标：播放图标和暂停图标。目前，播放图标被配置为透明（透明度 = 0），所以在预览窗口中，只有暂停图标是可见的。

播放与暂停图标的透明度

首先，在“Play/Pause”组上添加一个单击触发动作。接下来，我们将创建一个基于播放图标的透明度等于0的条件。在这个条件下，我们将为视频图层添加一个播放反应来暂停它。与此同时，我们还需要切换图标。对于播放图标，将其透明度设置为100，对于暂停图标，将其不透明度设置为0。

播放/暂停按钮图标透明度

类似地，我们需要第二个条件，当播放图标的透明度已经为100时。为了简化流程，我们可以简单地复制第一个条件并进行必要的调整。选择第一个条件，然后按下键盘上的⌘ + D（Windows上为ctrl + D）。
对于第二个条件，我们将把播放的透明度设置为100。随后的响应将是播放视频，将播放图标的透明度更改为0，将暂停图标的透明度更改为100。

将播放图标的不透明度更改为0，将暂停图标的不透明度更改为100

现在让我们在预览窗口中看一下。你会发现播放/暂停控件运作得很完美。

对于第二种方法——点击视频的任何地方——交互将与我们刚刚配置的第一种方法非常相似。

触发动作是我们单击视频的任何地方。所以让我们给视频图层添加一个单击触发。然后，非常简单！让我们将播放/暂停按钮的交互复制并粘贴到这里。

复制播放/暂停按钮的交互并粘贴

让我们添加一些最后的修饰。在图层面板中，你会看到一个名为Large Play Button的组。我们希望确保它在视频暂停时可见，而在视频播放时隐藏。我们可以通过使用不透明度响应来控制何时显示它以及何时隐藏它来实现这一点。

“large play”按钮

最后，还有一个细节要处理。尽管我们提到点击视频的任何地方，严格来说，我们仍然希望避免顶部和底部的功能区域。

避免顶部与底部功能区域

为此，让我们选择Overlay Functions Top和Overlay Functions Bottom两个组，在其属性面板中禁用Make Lower Layers Touchable选项。

禁用“make lower”图层可触摸式

恭喜！您已成功实现了一个完全功能的播放/暂停控制系统。无论您是点击专用按钮还是屏幕上的任何位置，都可以轻松控制视频播放。做得好！

4. 跟踪视频进度

现在，让我们深入设置进度条的交互。这包括一系列的动作：

基于视频显示当前播放时间和总时间。
确保当视频播放时，进度条同步移动以反映当前时间。
允许用户拖动进度条在视频中导航。
提供通过点击视频任何地方导航的替代选项。

让我们一个一个地来解决这些问题。

显示视频时间

首先，添加一个监听触发动作。对于触发动作，我们将选择Video图层的时间属性。这个设置将持续监视视频当前播放时间的任何变化，并在发生变化时触发相应的交互。

添加一个监听触发动作

接下来，我们将为播放时间图层分配一个文本反应。我们将使用表达式进行此响应。我们将使用的表达式是`Video`.currentTime.。这将确保该图层准确反映视频的当前播放时间。

将一个文本反应分配给播放时间图层

在预览时，您可能会注意到以两位小数显示的时间。这种格式可能不符合您的需求。为了以更用户友好的格式呈现时间，我们将相应地进行格式化。

以两位小数显示的时间

为了实现所需的时间格式，我们将创建两个专门用于此场景的变量。一个变量 “min” 代表格式化时间中的分钟部分，而另一个变量 “sec ”代表秒数。
然后，我们将在这两个变量中都选中“使用表达式”选项，并设置如下的公式。

检查两个变量都勾选了“使用表达式”

对于 min 变量，我们将使用 floor(`Video`.currentTime/60这个表达式。该公式通过将视频当前播放时间除以 60 然后向下取整来计算分钟部分。

为“min”设置表达式

对于 sec 变量，我们将使用 floor(`Video`.currentTime-min*60)这个表达式。该公式通过从视频当前播放时间中减去分钟（在 min 变量中先前计算）乘以 60，然后向下取整来计算秒钟部分。

为“sec”设置表达式

完成了变量的正确配置后，让我们进行一次快速的调试检查。你可以通过点击瓢虫图标使变量显示在屏幕上。在预览窗口中，你会看到变量显示在绿色框中。

让我们进行一次快速的调试检查

最后，让我们回到文本反应，调整在那里使用的表达式。我们将修改表达式为：lpad(min,2,"0")+":"+lpad(sec,2,"0")。这个表达式将确保以所需的格式显示时间，如果需要，会有前导零以保持一致。

修改公式

要显示总时间，你可以轻松地点击视频图层，并在属性面板中找到总时间。有了这个信息，你可以相应地调整你的设计，以包括以所需格式显示的总时间。

你可以根据需要调整你的设计，以包括以所需格式显示的总时间

干得好！你已经完成了时间显示的设置。现在，让我们预览一下我们迄今为止完成的工作，看看它们是如何共同协作的。

与进度条交互

让我们继续进行进度条的设置。首先，我们希望进度条能够反映当前视频的进度。

为了将视频的时间与进度条关联起来，让我们在视频图层上添加一个联动触发动作。对于触发动作属性，请选择时间。

为视频图层添加一个联动触发器

现在，我们希望视频的时间控制进度条。为Knob图层添加一个移动反应，该图层是用于拖动进度条的小点（我们将在教程的后面部分介绍这一点）。

为“knob”图层添加一个移动反应

对于视频的范围，它将从开始时间延伸到结束时间。关于Knob的X位置，它应该从最左边移动到最右边，因此在这种情况下，它将从0px到1200px的范围。这个设置将使进度条与视频的播放时间同步。

我们还希望Active Fill图层随着Knob的移动而缩放。在这种情况下，让我们再为Knob的X位置添加一个联动触发，然后让Active Fill进行一个大小反应。

为 's X position 添加另一个联动触发，并为 Active Fill 添加一个大小反应

这个设置将确保Active Fill图层在Knob沿着进度条移动时按比例大小缩放。

让我们在预览窗口中查看一下。

播放时间展示的预览效果

现在，让我们使进度条可拖动。拖动交互将应用于进度条的旋钮，允许您浏览视频的进度。同时，视频将调整其播放位置，Active Fill 图层将相应地填满进度条。

为 Knob 图层添加 拖动触发动作。
在拖动交互下，我们将为 Knob 配置一个移动操作。对于此移动操作，我们希望限制旋钮仅在水平方向移动。此外，我们将设置限制，确保旋钮不会超出进度条的范围。具体而言，限制将从 0px 到 1200px，确保其保持在进度条的范围内。当我们完成拖动操作并释放鼠标时，我们希望视频将其进度调整到旋钮拖动到的当前点。因此，让我们为 Knob 图层添加一个抬起触发动作。