720云部分功能在Unity中的制作（2）——点击物体播放和暂停视频_unity3d怎么用quad播放视频

案例中点击影音墙的黑色部分（或者说屏幕部分）可以控制视频的播放与暂停，如下面的gif所示。

首先要确定播放视频的区域，如果直接给影音墙添加VideoPlayer组件则会在影音墙的每个面都播放视频，因此需要创建一个Plane或者Quad来承载将要播放的视频。右键模型中的yingyingqiang 模型里这玩意就打错了，俺也懒得改了，选择3D Object中的Plane/Quad，本节以Quad为例。

选中Quad，在右侧Inspector面板中点击Transform组件右边的三个点，选择Reset，令Quad快速移动至yingyingqiang的位置。此时Quad是背向主视角的，修改Quad的Transform中的Rotation的Y值属性使其带颜色的一面朝向主视角，稍微调整其位置和大小使其正好覆盖住yingyingqiang的黑色屏幕区域。

为了使视频播放时过渡更加自然，我们要修改Quad的材质。此处选择的材质球颜色为灰色，将该材质球赋予Quad，然后隐藏Quad。

将想要播放的视频导入到unity中，给Quad添加一个Video Player组件，在Video Clip处选择刚刚导入的视频。

创建ClickPlayVideo的脚本文件。这部分的操作涉及到视频的播放，需要引入UnityEngine.Video的命名空间。

using UnityEngine.Video;
1

随后设定部分变量：

//用于播放视频的平面
public GameObject videoQuad;

//VideoPlayer组件
public VideoPlayer vPlayer;

//用于判断视频是否在播放
bool isPlay = true;
1
2
3
4
5
6
7
8

点击播放功能主要涉及到射线检测，摄像机向鼠标点击的位置发射一条射线，随后存储该射线的信息以进行后续的判断。存储完射线信息后便要开始进行视频是否播放的判断。先对isPlay的值进行判断，我们设定初始变量时设置了isPlay的初始值为true，所以可以直接进入循环。然后用Input.GetMouseButtonDown(0)检测鼠标左键是否按下，如果按下则进行射线检测，此时如果射线射到物体，则设置Quad的可见度为真及播放视频，同时更改isPlay的值为false。

//摄像机发出一条射线通过鼠标当前的屏幕位置
Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
//从射线中存储射线信息
RaycastHit hit;
if (isPlay)
{
	if (Input.GetMouseButtonDown(0))
	{
		//如果射到物体
        if (Physics.Raycast(ray, out hit) && hit.collider.gameObject.name == "yingyingqiang")
        {
        	videoQuad.SetActive(true);
            vPlayer.Play();
            isPlay = false;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

此时仅实现了点击屏幕播放视频，接下来实现播放视频时点击屏幕暂停视频。在最开始的if语句后添加一个else if，同样使用Input.GetMouseButtonDown(0)检测鼠标左键是否按下，如果按下则进行射线检测，此时如果射线射到物体，则暂停视频并更改isPlay的值为true。

else if(Input.GetMouseButtonDown(0))
{
	if (Physics.Raycast(ray, out hit) && hit.collider.gameObject.name == "yingyingqiang")
     {
     	vPlayer.Pause();
        isPlay = true;
     }
 }
1
2
3
4
5
6
7
8

实现点击播放和暂停视频后，在视频暂停时可以添加一个播放键来提示用户点击屏幕可以恢复视频的播放。右键yingyingqiang->UI->Image，选中Canvas，设定其Render Mode为World Space，设定Event Camera为Main Camera，修改位置参数。

然后给Image添加一个播放形式的精灵图，可以去iconfont上下载一个，导入后记得调整图片的的Texture Type为Sprite（2D and UI）。调整Image至合适大小和位置后将Image隐藏。

在ClickPlayVideo脚本中添加一个image对象，只需要在播放时设置image的可见度为假，暂停时可见度为真即可。

//暂停时出现的播放图片
public GameObject image;
1
2

代码编写完成后，选中yingyingqiang，点击Add Component将ClickPlayVideo脚本添加给yingyingqiang，设置Video Quad和V Player的值为之前建立的Quad对象，Image的值为yingyingqiang下的Canvas的Image对象。此外，射线检测是针对碰撞体的，点击Add Component为yingyingqiang添加Box Collider组件，点击Box Collider组件下的Edit Collider调整碰撞体至中间的大屏幕。

最后附上ClickPlayVideo的全部代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Video;

public class ClickPlayVideo : MonoBehaviour
{
    //用于播放视频的平面
    public GameObject videoQuad;
    //VideoPlayer组件
    public VideoPlayer vPlayer;
    //暂停时出现的播放图片
    public GameObject image;
    //用于判断视频是否在播放
    bool isPlay = true;

    // Update is called once per frame
    void Update()
    {
        //摄像机发出一条射线通过鼠标当前的屏幕位置
        Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
        //从射线中存储射线信息
        RaycastHit hit;
        if (isPlay)
        {
            if (Input.GetMouseButtonDown(0))
            {
                //如果射到物体
                if (Physics.Raycast(ray, out hit) && hit.collider.gameObject.name == "yingyingqiang")
                {
                        videoQuad.SetActive(true);
                        image.SetActive(false);
                        vPlayer.Play();
                        isPlay = false;
                }
            }
        }
        else if(Input.GetMouseButtonDown(0))
        {
            if (Physics.Raycast(ray, out hit) && hit.collider.gameObject.name == "yingyingqiang")
            {
                vPlayer.Pause();
                image.SetActive(true);
                isPlay = true;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

效果大概就是这样：