随着数字时代的不断发展，音乐和视频已经牢固地确立为我们主要的娱乐来源。当任务是设计围绕音频和视频体验的应用程序时，一个关键因素浮现出来：先进的原型设计。
考虑一下在我们屏幕上每天支配的应用程序：Netflix、Spotify、TikTok和Facebook。它们的核心是一个可靠的媒体播放器，具有基本功能，如播放、暂停、流畅的进度控制和精确的音量调整。
特别是在有了ProtoPie作为你可靠的伙伴之后，先进的原型设计变得比你想象的更加易于实现。在这个教程中，我们鼓励你站在领先的应用程序设计师的角度。我们将演示如何轻松塑造既引人入胜又适合初学者设计师的多媒体体验。
媒体播放器原型是如何工作的
虽然我们的演示重点放在了视频播放器上，但我们将涵盖的步骤同样适用于音频播放器。在深入细节之前，让我们快速了解一下你将能够创建的交互：
基础播放/暂停控制 — 你可以简单地点击播放/暂停按钮来开始或停止播放。或者，点击视频的任何地方都会实现相同的播放/暂停操作。
跟踪视频进度 — 为了导航视频的进度，你可以点击进度条上的任何点，或者拖动进度条本身。
音量控制— 调整音量就像拖动音量滑块一样简单。值得注意的是，音量图标的外观会根据音量水平而自适应变化。或者，你可以直接点击音量按钮将视频静音。
使用ProtoPie创建交互式视频播放器
1. 在原型中使用视频
借助ProtoPie内置的媒体图层 ，你可以轻松地通过无缝的视频和音频集成增强你的原型。ProtoPie支持各种类型的媒体文件，包括：
.mp4（H.264）最大可达100 MB。
.wav、.mp3和.m4a
Lottie JSON
2. 从悬停效果开始
当你打开起始的 Pie 文件时，你会注意到模板中预先制作的一组交互。这些交互包括用于覆盖、按钮和各种功能的悬停效果，通过鼠标悬停 和鼠标移出反应 。如果你对这些功能还不熟悉。
让我们打开预览窗口，仔细看看你可以使用的功能：
在视频播放器上悬停会触发一个覆盖层，展示不同的功能。
每个功能，如播放/暂停和快进，都带有自己的悬停效果。
如果将鼠标光标移出视频播放器，只需等待3秒，覆盖层就会优雅地消失。
3. 添加基础的播放与暂停控制按钮
当然，让我们首先配置原型，以便在加载时自动开始播放视频。我们可以通过对视频图层进行单一设置调整来实现这一点。
选择视频图层，然后转到其属性面板。在这里，启用“自动播放”选项。
现在，当你打开预览时，你会注意到视频在加载完成后会自动开始播放。专业提示！ProtoPie在你进行编辑时会刷新预览窗口，这旨在帮助你方便地检查更新。然而，在处理媒体图层时，这可能导致频繁的刷新和声音重复播放。如果你更喜欢更受控制的体验，可以在预览窗口设置中禁用“自动重启”选项。
在我们的示例中，有两种不同的方法可以播放或暂停视频。第一种方法涉及使用专用的播放/暂停按钮，而第二种方法允许你通过单击视频的任何地方来执行相同的操作。
让我们从第一种方法开始 - 使用播放/暂停按钮。
为了简化交互过程，让我们确保叠加变得可见。找到“Overlay Functions Bottom”组，并将其透明度设置为100。这将使我们更容易找到所需的图层。
在图层面板中，找到一个名为“Play/Pause”的组。在这个组内，你会找到两个图标：播放图标和暂停图标。目前，播放图标被配置为透明（透明度 = 0），所以在预览窗口中，只有暂停图标是可见的。
首先，在“Play/Pause”组上添加一个单击触发动作。接下来，我们将创建一个基于播放图标的透明度等于0的条件。在这个条件下，我们将为视频图层添加一个播放反应来暂停它。 与此同时，我们还需要切换图标。对于播放图标，将其透明度设置为100，对于暂停图标，将其不透明度设置为0。
类似地，我们需要第二个条件，当播放图标的透明度已经为100时。为了简化流程，我们可以简单地复制第一个条件并进行必要的调整。选择第一个条件，然后按下键盘上的⌘ + D（Windows上为ctrl + D）。对于第二个条件，我们将把播放的透明度设置为100。随后的响应将是播放视频，将播放图标的透明度更改为0，将暂停图标的透明度更改为100。
现在让我们在预览窗口中看一下。你会发现播放/暂停控件运作得很完美。对于第二种方法——点击视频的任何地方——交互将与我们刚刚配置的第一种方法非常相似。
触发动作是我们单击视频的任何地方。所以让我们给视频图层添加一个单击触发。然后，非常简单！让我们将播放/暂停按钮的交互复制并粘贴到这里。让我们添加一些最后的修饰。在图层面板中，你会看到一个名为Large Play Button的组。我们希望确保它在视频暂停时可见，而在视频播放时隐藏。我们可以通过使用不透明度响应来控制何时显示它以及何时隐藏它来实现这一点。
最后，还有一个细节要处理。尽管我们提到点击视频的任何地方，严格来说，我们仍然希望避免顶部和底部的功能区域。为此，让我们选择Overlay Functions Top和Overlay Functions Bottom两个组，在其属性面板中禁用Make Lower Layers Touchable选项。恭喜！您已成功实现了一个完全功能的播放/暂停控制系统。无论您是点击专用按钮还是屏幕上的任何位置，都可以轻松控制视频播放。做得好！
