UE4新手必看：用Widget打造视频播放器（含进度条+倍速控制）

UE4 Widget实战：从零构建一个带进度条与倍速控制的视频播放器

你是否曾想过在虚幻引擎4的项目中，嵌入一个功能齐全、交互流畅的视频播放器？无论是用于游戏内的过场动画、UI教学视频，还是交互式媒体展示，一个自定义的视频播放器都能极大地提升用户体验。对于刚接触UE4 Widget系统的开发者来说，这听起来可能有些复杂，涉及到材质、蓝图、UI控件的联动。但别担心，今天我们就来彻底拆解这个过程，手把手带你构建一个不仅支持播放暂停，还能精确控制进度、自由切换倍速的专业级播放器界面。我们将聚焦于解决“进度条同步”和“倍速切换”这两个核心痛点，让你在理解原理的同时，获得一套可直接复用的完整方案。

1. 项目准备与媒体资源导入

在开始构建UI之前，我们需要确保引擎环境和媒体资源都已就绪。首先，创建一个新的UE4项目，选择“空白”或“第三人称”模板均可，这不会影响我们的UI构建。关键在于，你需要准备好要播放的视频文件。UE4支持多种视频格式，如.mp4、.avi、.wmv等。为了获得最佳的兼容性和性能，建议使用H.264编码的MP4文件。

将视频文件直接拖入内容浏览器的某个文件夹内（例如，新建一个Media文件夹），引擎会自动导入。导入后，你会看到一个视频资源文件。接下来，我们需要创建一个Media Player资产。在内容浏览器中右键点击，选择“媒体” -> “媒体播放器”，将其命名为MP_VideoPlayer。创建时，会弹出一个选项窗口，询问是否同时创建视频纹理，务必勾选“创建视频纹理”。这一步至关重要，因为我们的UI最终是通过一个材质来显示视频画面的，而这个材质需要采样视频纹理。

注意：如果视频导入后播放异常（如无画面或绿屏），请检查视频的编码格式。有时需要将视频转换为更通用的编码（如H.264 Main Profile）再重新导入。

创建完成后，你会在内容浏览器中看到两个新资产：

• MP_VideoPlayer：这是控制视频播放逻辑的核心对象。
• MP_VideoPlayer_Video：这是动态的视频纹理，它会随着视频播放实时更新。

现在，双击打开MP_VideoPlayer资产，将我们导入的视频文件从内容浏览器拖拽到其“播放列表”中。这样，媒体播放器就知道该播放哪个文件了。你可以点击工具栏的播放按钮进行预览测试。

2. 创建视频显示材质与UI材质

视频纹理本身并不能直接放到UI上，我们需要通过一个材质来“包装”它。在内容浏览器中，右键点击刚才生成的MP_VideoPlayer_Video纹理，选择“创建材质”。将这个新材质命名为M_VideoScreen。

双击打开M_VideoScreen材质，我们将进入材质编辑器。这里的目标非常简单：创建一个UI材质，它能采样我们的视频纹理并输出。

1. 在材质图表中，右键搜索并添加一个 Texture Sample 节点。
2. 点击Texture Sample节点，在细节面板中，将其“纹理”属性设置为MP_VideoPlayer_Video。
3. 材质本身默认是“表面”类型，我们需要将其改为UI专用。在材质编辑器的细节面板中，找到“材质域”，将其从“表面”改为 用户界面。
4. 将Texture Sample节点的RGB输出引脚