第 13 课
实现视频的播放（上）
本课将完成视频播放的基础链路。你会先认识视频从文件进入场景画面的过程，再导入练习视频、建立播放平面、制作 VideoMat 材质，并使用 Video Player 把视频帧输出到 Quad。完成后，进入运行模式就能直接看到视频画面。
在虚拟博物馆中建立自动播放视频屏幕
把视频文件、Video Player、无光照材质和 Quad 连接起来，让蒙娜丽莎展区出现一块比例正确、亮度稳定的自动播放屏幕。
学完你将能够
学习目标
- 解释 Video Clip、Video Player、VideoMat、Quad 和 Main Camera 的分工。
- 说出视频从文件到场景画面的完整渲染顺序。
- 建立 _Video 文件夹并在 Inspector 中预览视频资源。
- 区分 Plane 与 Quad，并使用 Quad 建立视频屏幕。
- 根据使用者位置判断 Quad 的正面方向。
- 创建使用通用渲染管线无光照着色器的 VideoMat。
- 根据视频宽高比调整 Quad，避免画面拉伸或压缩。
- 区分常见的视频输出方式，并为场景屏幕选择 Material Override。
- 使用 Play On Awake 完成自动播放。
- 根据画面现象逐层查找黑屏、方向错误和比例失真的原因。
开始操作前
准备工作
- 确认已经完成上一课的 VideoControllerUI 和 VideoControlBtn，并保留播放按钮。
- 打开 MainScene，确认蒙娜丽莎展区和使用者起始位置能够正常观察。
- 确认项目使用通用渲染管线 URP，Project 窗口中已有 _Materials 文件夹。
- 打开 Scene、Game、Hierarchy、Project 和 Inspector 窗口。
- 先保存一次 MainScene，再开始本课操作。
本课学习路线
按照学习模块逐步完成
每个模块都包含理解、跟随操作和独立实践。先分清内容、播放、材质和显示位置
理解视频从文件到场景画面的链路
把视频文件拖入项目，只能让 Unity 认识这份资源。要在三维场景中看到连续画面，还需要播放组件、材质、网格和摄像机共同工作。视频播放链路中的关键对象
每个对象只解决一部分问题，理解分工后更容易判断故障位置。
左右滑动表格，可查看完整内容
| 对象 | 中文理解 | 主要作用 |
|---|---|---|
| Video Clip | 视频片段资源 | 提供需要播放的视频内容 |
| Video Player | 视频播放器组件 | 读取视频帧，控制播放时机和输出位置 |
| VideoMat | 视频材质 | 通过 Base Map 接收不断变化的视频帧 |
| Quad | 简单四边面 | 决定视频屏幕在场景中的位置、大小和朝向 |
| Main Camera | 使用者视角 | 渲染 Quad，让使用者最终看到视频画面 |
视频可以理解为不断变化的贴图
普通贴图通常在运行时保持不变，视频则由一连串按顺序变化的画面组成。Video Player 不断读取当前帧，再把这一帧送给材质的纹理属性。
VideoMat 接收当前帧后，由 Quad 的 Mesh Renderer（网格渲染器）把它绘制在面片表面。摄像机看到这个面片时，使用者就看到了连续播放的视频。
沿箭头依次阅读：视频文件提供内容，Video Player 解码并输出视频帧，Material Override 把画面写入 VideoMat，Quad 再把材质绘制到场景中。
手机上可左右滑动；点击图片可以查看完整图为什么先完成自动播放
本课先只确认视频文件、播放组件、材质输出和场景屏幕已经接通。如果一开始就同时加入按钮、脚本和图标切换，出现问题时会很难判断是哪一层没有工作。
自动播放成功后，下一课只需要在已经正常工作的 Video Player 上加入播放和暂停控制。
复述一次视频渲染过程
沿流程图从左向右说明每个对象接收了什么，又把什么交给下一步。
- 指出 Video Clip 只负责提供内容。
- 说明 Video Player 负责读取帧和决定输出位置。
- 说明 VideoMat 通过 Base Map 接收画面。
- 指出 Quad 的 Transform 决定屏幕的位置、大小和朝向。
先确认视频本身能够被 Unity 读取
导入并认识视频资源
视频文件通常比图片和材质更大。把它们放进独立文件夹，并先用 Inspector 预览，可以在建立场景屏幕之前排除资源本身的问题。下载本课练习视频
下载 Mona Lisa 视频后，将它保存到容易找到的位置，随后拖入 Unity 的 _Video 文件夹。
- 文件格式：MP4
- 视频编码：H.264
- 画面尺寸：1070 × 720 像素
- 文件大小：约 42 MB
先认识三个视频参数
视频编码是保存和压缩画面的方式，本课使用常见的 H.264。分辨率表示每帧画面的横向和纵向像素数量，本课视频为 1070 × 720。码率表示视频每秒需要读取的数据量，通常越高越能保留细节，但对设备读取和解码能力的要求也越高。
MP4 是文件容器名称。以后替换视频时，还要在实际使用的 PICO 设备上确认编码、分辨率和码率是否适合。
建立 _Video 文件夹
- 01
在 Project 窗口中选中 Assets。
- 02
在空白处右键，选择 Create → Folder。
- 03
把新文件夹命名为 _Video。
- 04
打开 _Video，准备导入练习视频。
在 Assets 下建立 _Video，用它集中保存项目中的视频资源。名称前的下划线只是资源整理习惯，不是 Unity 的强制要求。
点击图片可以查看完整截图确认视频能够被 Unity 读取
- 01
把下载好的 Mona Lisa.MP4 拖入 _Video 文件夹。
- 02
等待 Unity 完成导入，再选中这个 Video Clip。
- 03
找到 Inspector 底部的分隔线，向上拖动以展开预览区域。
- 04
使用预览区域中的播放按钮查看画面。
- 05
确认画面内容和方向正确。
本课练习视频的关键参数
后续将使用真实宽高计算播放平面的比例。
左右滑动表格，可查看完整内容
| 参数 | 数值 | 后续用途 |
|---|---|---|
| 文件名 | Mona Lisa.MP4 | 指定给 Video Player |
| 视频编码 | H.264 | 判断目标设备能否顺利解码 |
| 画面宽度 | 1070 像素 | 计算 Quad 的横向比例 |
| 画面高度 | 720 像素 | 计算 Quad 的纵向比例 |
| 宽高比 | 1070 ÷ 720 ≈ 1.486 | 避免视频画面变形 |
完成视频导入与预览
使用下载的视频建立资源结构，并通过 Inspector 确认文件本身可用。
- _Video 文件夹位于 Assets 下。
- Mona Lisa 已作为 Video Clip 出现在 Project 窗口中。
- Inspector 预览能够显示视频画面。
- 能够说出预览成功与场景播放成功的区别。
用最简单的面片承载视频画面
使用 Quad 建立视频屏幕
视频屏幕只需要一个平整的显示表面，不需要复杂网格。Quad 由两个三角形组成，适合显示图片、视频和简单广告牌。Plane 与 Quad 的区别
两者都是平面网格，但默认结构和常见用途不同。
左右滑动表格，可查看完整内容
| 对象 | 默认结构 | 常见用途 | 本课选择 |
|---|---|---|---|
| Plane | 面积较大并带有较多网格细分 | 地面或需要细分变形的表面 | 不使用 |
| Quad | 由两个三角形组成的简单四边面 | 图片、视频和指示牌 | 作为视频屏幕 |
在 Hierarchy 中建立 Quad
- 01
在 Hierarchy 空白处单击右键。
- 02
展开 3D Object。
- 03
选择 Quad。
- 04
选中新对象，确认它具有 Mesh Filter、Mesh Renderer 和 Mesh Collider。
选择 3D Object → Quad，建立承载视频画面的简单播放平面。
点击图片可以查看完整截图为什么从背面可能看不到 Quad
Quad 是单面网格。许多材质会启用背面剔除，也就是摄像机从网格背面观察时不绘制这一面，从而减少不需要的渲染。
如果 Hierarchy 中仍然存在 Quad，但 Scene 或 Game 窗口中像是消失了，先转动观察方向，不要立即重新创建对象。
让视频屏幕正面朝向使用者
- 01
观察使用者起始位置和 Quad 当前正面方向。
- 02
如果使用者位于面片背面，把 Rotation Y 设置为 180 或 -180。
- 03
使用移动工具把 Quad 放到蒙娜丽莎展区的合适位置。
- 04
让 Quad 与墙面保持很小的距离，避免两个表面重合闪烁。
- 05
确认播放按钮没有被 Quad 遮挡。
- 06
把游戏对象命名为 VideoPlayer。
观察右上角 Transform 中的 Rotation Y 和左侧场景中的面片。180 度只适用于当前方向，真正标准是 Game 窗口能否看到正面。
点击图片可以查看完整截图摆放视频屏幕时要观察的现象
位置数值应根据自己的场景和观看距离判断。
左右滑动表格，可查看完整内容
| 观察内容 | 合适状态 | 需要调整的对象 |
|---|---|---|
| 屏幕方向 | Game 窗口能够看到正面 | Rotation Y |
| 墙面关系 | 屏幕略微离开墙面，没有闪烁 | Position |
| 观看距离 | 不需要大幅转头，画面清楚 | Position 与 Scale |
| 按钮关系 | 屏幕不遮挡 VideoControlBtn | 前后位置 |
建立方向正确的场景屏幕
创建、旋转和摆放 Quad，并在 Scene 与 Game 窗口中对照结果。
- Quad 已命名为 VideoPlayer。
- 面片正面朝向使用者。
- Quad 与墙面没有完全重合。
- 播放按钮仍然可见并且不会被屏幕挡住。
让视频画面不受场景灯光影响
创建亮度稳定的 VideoMat
普通三维材质会参与光照计算，屏幕的一边可能变亮或变暗。视频屏幕更适合使用 Unlit，也就是无光照材质，以接近原始画面亮度。为什么不直接修改默认材质
新建 Quad 会使用项目或渲染管线提供的默认材质。它可能被多个对象共享，不适合直接修改。
本课创建独立的 VideoMat。这样可以明确控制着色器和视频纹理，也不会影响其他模型。
在 _Materials 中建立 VideoMat
- 01
在 Project 窗口中打开 _Materials。
- 02
在空白处右键，选择 Create → Material。
- 03
把新材质命名为 VideoMat。
- 04
选中 VideoMat，在 Inspector 中准备修改 Shader。
在 _Materials 文件夹中选择 Create → Material，建立只用于视频屏幕的独立材质。
点击图片可以查看完整截图Lit 与 Unlit 的区别
Lit 表示参与光照计算，Unlit 表示表面亮度不由场景灯光决定。
左右滑动表格，可查看完整内容
| 材质类型 | 是否响应场景灯光 | 适合内容 |
|---|---|---|
| Lit | 会随灯光、法线和阴影改变明暗 | 墙面、金属、木材和普通模型 |
| Unlit | 不依靠场景灯光决定表面亮度 | 视频屏幕、图标和指示牌 |
把 VideoMat 改为 URP Unlit
- 01
选中 VideoMat。
- 02
打开 Inspector 顶部的 Shader 下拉列表。
- 03
展开 Universal Render Pipeline。
- 04
选择 Unlit。
- 05
确认材质 Inspector 中出现 Base Map。
选择 Universal Render Pipeline → Unlit，让视频画面保持稳定亮度，不随展馆灯光出现不均匀明暗。
点击图片可以查看完整截图Base Map 是视频画面的入口
Base Map 是 URP Unlit 材质的主要纹理属性。后面使用 Material Override 时，Video Player 会不断把当前视频帧写入这里。
可以把 Base Map 理解为 Video Player 把画面交给 VideoMat 的入口。材质颜色保持白色，避免给视频叠加额外色调。
把 VideoMat 交给 Quad
- 01
把 VideoMat 从 Project 窗口拖到场景中的 VideoPlayer Quad。
- 02
选中 VideoPlayer。
- 03
在 Mesh Renderer 中确认材质槽显示 VideoMat。
完成视频材质设置
创建独立材质、选择正确着色器，并确认 Quad 已经引用它。
- VideoMat 位于 _Materials 文件夹。
- Shader 为 Universal Render Pipeline/Unlit。
- VideoMat 的颜色保持白色。
- VideoPlayer 的 Mesh Renderer 使用 VideoMat。
先保证画面不变形，再决定屏幕大小
根据宽高比调整播放平面
默认 Quad 接近正方形，而本课视频是横向画面。只凭感觉拉伸容易让人物变胖或变瘦，应该先计算比例，再整体放大。使用视频宽度除以高度
本课视频宽度为 1070 像素，高度为 720 像素。宽高比的计算方法是 1070 ÷ 720，结果约为 1.486。
为了便于操作，可以使用 1.48:1。这个比例决定屏幕形状；屏幕在场景中有多大，则由 X 和 Y 同时放大的倍数决定。
从原始比例得到场景缩放
先建立 1.48:1，再把两个轴同时放大 2.5 倍。
左右滑动表格，可查看完整内容
| 步骤 | Scale X | Scale Y | 作用 |
|---|---|---|---|
| 建立原始比例 | 1.48 | 1 | 保证屏幕形状与视频接近 |
| 整体放大 2.5 倍 | 3.7 | 2.5 | 保持比例并增加场景尺寸 |
| 保持平面厚度 | — | — | Scale Z 保持 1 |
设置比例、大小和碰撞状态
- 01
选中 VideoPlayer 游戏对象。
- 02
把 Scale X 设置为约 3.7。
- 03
把 Scale Y 设置为约 2.5。
- 04
把 Scale Z 保持为 1。
- 05
在 Game 窗口观察屏幕是否适合当前观看距离。
- 06
如果需要继续放大，同时按相同倍数调整 X 和 Y。
- 07
移除 VideoPlayer 上不需要的 Mesh Collider。
比例、大小和碰撞分别解决什么问题
不要把三个问题混在一起调整。
左右滑动表格，可查看完整内容
| 设置 | 解决的问题 | 错误设置的现象 |
|---|---|---|
| X:Y 接近 1.48:1 | 画面是否保持原始形状 | 人物被拉宽或压窄 |
| X 与 Y 同倍放大 | 屏幕在场景中是否足够大 | 只改一个轴会改变比例 |
| 移除 Mesh Collider | 避免屏幕参与不需要的物理和射线阻挡 | 屏幕可能挡住按钮射线 |
完成比例与观看效果调整
根据 1070 × 720 计算并设置播放平面，再从使用者视角观察结果。
- Quad 呈现接近 1.48:1 的横向形状。
- 人物和圆形物体没有明显拉伸或压缩。
- 屏幕大小适合当前观看距离。
- Mesh Collider 已移除，按钮射线不会被屏幕挡住。
把视频文件真正连接到场景屏幕
配置 Video Player 与材质输出
Video Player 决定读取哪段视频、什么时候播放以及画面送到哪里。本课使用 Material Override，把视频帧直接写入 Quad 所使用的 VideoMat。把 Mona Lisa 拖到 VideoPlayer 对象
- 01
在 Project 窗口中找到 Mona Lisa Video Clip。
- 02
把它拖到 Hierarchy 中的 VideoPlayer 游戏对象。
- 03
选中 VideoPlayer，在 Inspector 中找到新增的 Video Player 组件。
- 04
确认 Video Clip 字段已经引用 Mona Lisa。
Video Player 的视频来源
Source 表示播放器从哪里获得视频内容。
左右滑动表格，可查看完整内容
| Source | 中文理解 | 适合情况 |
|---|---|---|
| Video Clip | 使用已经导入项目的视频资源 | 本地固定视频和本课练习 |
| URL | 使用文件路径或网络地址 | 运行时加载外部视频 |
常见 Render Mode 输出方式
Render Mode 决定 Video Player 把当前视频帧送到哪里。
左右滑动表格，可查看完整内容
| Render Mode | 输出位置 | 常见用途 |
|---|---|---|
| Camera Far Plane | 摄像机远裁切面 | 动态背景 |
| Camera Near Plane | 摄像机近裁切面 | 覆盖视野的过场画面 |
| Render Texture | 独立的实时渲染纹理 | 多个对象、Raw Image 或后处理 |
| Material Override | Renderer 材质的纹理属性 | 场景中的 Quad 视频屏幕 |
| API Only | 由程序读取并分配纹理 | 需要完全自定义的输出控制 |
为什么本课使用 Material Override
视频需要固定显示在蒙娜丽莎旁边的 Quad 上，而不是覆盖整个视野，也不需要被多个对象共用。
Material Override 可以直接找到 Quad 的 Mesh Renderer，并把当前视频帧写入 VideoMat 的 Base Map。它比额外建立 Render Texture 更直接。
连接 Video Player、VideoMat 和 Quad
- 01
把 Source 保持为 Video Clip，并确认目标为 Mona Lisa。
- 02
把 Render Mode 设置为 Material Override。
- 03
确认 Renderer 指向当前 VideoPlayer Quad 的 Mesh Renderer。
- 04
保持 Auto Select Property 启用，让 Unity 自动找到材质的 Base Map。
- 05
保持 Play On Awake 启用，使场景启动后自动播放。
- 06
根据展示需要决定是否启用 Loop 循环播放。
本课需要确认的 Video Player 属性
每个字段都对应视频链路中的一个明确问题。
左右滑动表格，可查看完整内容
| 属性 | 本课设置 | 作用 |
|---|---|---|
| Source | Video Clip | 从项目资源中读取视频 |
| Video Clip | Mona Lisa | 指定实际播放内容 |
| Render Mode | Material Override | 把画面写入模型材质 |
| Renderer | VideoPlayer 的 Mesh Renderer | 指定显示画面的对象 |
| Auto Select Property | 启用 | 自动选择 VideoMat 的 Base Map |
| Play On Awake | 启用 | 进入运行模式后自动开始播放 |
| Loop | 按展示需要选择 | 播放结束后是否重新开始 |
接通视频输出链路
逐项设置 Video Player，并从 Video Clip 一直检查到 Quad 的 Mesh Renderer。
- Video Clip 引用为 Mona Lisa。
- Render Mode 为 Material Override。
- Renderer 指向当前 Quad。
- Auto Select Property 能够找到 Base Map。
- Play On Awake 保持启用。
按链路顺序观察，而不只看有没有画面
运行场景并完成自动播放
运行前先确认每一层设置，运行后同时观察播放状态、方向、比例和亮度。出现黑屏时，从视频资源开始逐层判断。运行前检查顺序
从场景对象到播放组件依次确认，能够减少遗漏。
左右滑动表格，可查看完整内容
| 顺序 | 检查位置 | 正确状态 |
|---|---|---|
| 1 | VideoPlayer 游戏对象 | 对象已启用，正面朝向使用者 |
| 2 | Mesh Renderer | 使用 VideoMat |
| 3 | VideoMat | Shader 为 URP Unlit |
| 4 | Video Player / Video Clip | 引用 Mona Lisa |
| 5 | Render Mode | Material Override |
| 6 | Renderer | 指向当前 Quad 的 Mesh Renderer |
| 7 | Play On Awake | 已启用 |
| 8 | MainScene | 已经保存 |
确认自动播放的完整结果
- 01
保存 MainScene。
- 02
进入运行模式。
- 03
确认视频自动开始播放。
- 04
观察画面是否显示在 Quad 表面。
- 05
观察人物和圆形物体是否保持正常比例。
- 06
观察面片是否正面朝向使用者。
- 07
观察场景灯光是否让视频出现不均匀明暗。
- 08
确认 Console 没有新增错误。
常见现象与处理方法
从最早不符合预期的环节开始处理，不要一次修改多处设置。
左右滑动表格，可查看完整内容
| 现象 | 优先检查 | 处理方法 |
|---|---|---|
| Unity 无法导入视频 | 文件和编码 | 确认文件可用，并使用目标设备支持的 MP4/H.264 |
| Scene 中存在 Quad，但 Game 中看不到 | 朝向、视野和遮挡 | 翻转 Y 轴方向，并确认位于摄像机视野内 |
| Quad 与墙面同时闪烁 | 两个表面的前后距离 | 把 Quad 稍微移离墙面 |
| 视频画面一边亮、一边暗 | VideoMat Shader | 改为 URP Unlit，并确认 Mesh Renderer 引用了 VideoMat |
| 人物被拉宽或压窄 | Quad 宽高比 | 把 X:Y 调整到接近 1.48:1 |
| 能够看到 Quad，但画面始终黑色 | 视频输出链路 | 检查 Video Clip、Render Mode、Renderer 和 Base Map |
| 视频没有自动开始 | Play On Awake | 启用该属性，并确认没有程序立即暂停视频 |
| 编辑器正常，PICO 中黑屏 | 设备解码能力 | 降低分辨率或码率，并使用常见 H.264 编码重新运行 |
独立完成自动播放视频屏幕
从资源整理开始，完整重做一次操作，并以运行结果作为完成标准。
- 在 _Video 中导入并预览 Mona Lisa。
- 创建 Quad，命名为 VideoPlayer，并让正面朝向使用者。
- 创建 URP Unlit 的 VideoMat 并赋给 Quad。
- 把屏幕宽高比设置为接近 1.48:1。
- 移除不需要的 Mesh Collider。
- 使用 Material Override 连接 Mona Lisa、VideoMat 和 Quad。
- 启用 Play On Awake，保存并运行 MainScene。
- 确认画面自动播放、比例正确、亮度稳定。
本课成果清单
逐项确认后，你已经完成可以继续加入按钮控制的视频播放基础。
- 我能说出视频从文件到场景画面的完整顺序。
- Mona Lisa 已导入 _Video，并能在 Inspector 中预览。
- VideoPlayer 使用 Quad，正面朝向使用者且不与墙面重合。
- VideoMat 使用 Universal Render Pipeline/Unlit。
- Quad 的宽高比接近 1.48:1，画面没有明显变形。
- Mesh Collider 已移除，不会挡住播放按钮射线。
- Video Player 引用 Mona Lisa，并使用 Material Override。
- Renderer 指向 Quad，Auto Select Property 正常工作。
- Play On Awake 已启用，视频进入运行模式后自动播放。
- VideoControllerUI 和 VideoControlBtn 仍然保留。
- MainScene 已保存，可以继续实现播放与暂停控制。
把知识变成作品
本课练习
请按顺序完成以下任务，并保存自己的学习成果。- 01
把视频屏幕移动到另一个展品旁，重新判断朝向和观看距离，不照搬当前位置数值。
- 02
暂时把 VideoMat 改为 Lit，观察场景灯光怎样影响画面，再恢复为 Unlit 并说明差异。
- 03
保持 1.48:1 的比例，同时把 X 和 Y 同倍缩放，比较不同屏幕大小下的观看体验。
把本课进度保存下来
登录后可以保存浏览内容、有效学习时间、完成状态和答题参与记录。