unity 手机端和编辑器下播放带有透明通道的视频详解

在项目开发中,可能会涉及到视频的播放,普通的视频播放如果大家不会的请自行百度,今天主要讲解带有透明通道的视频的播放问题,尤其是在手机端的处理,下面主要讲解两种方式,一种是通过unity提供的VideoPlayer 实现,一种是通过插件AVpro实现。

一、通过VideoPlayer实现视频的播放:

  1. 单一视频不需要动态更换视频:
    • 新建一个Plane,放置在场景中的合适位置处
    • 为Plane添加VideoPlayer组件
    • unity 手机端和编辑器下播放带有透明通道的视频详解_第1张图片
    • 创建一个新的材质球,使其支持透明通道
    • unity 手机端和编辑器下播放带有透明通道的视频详解_第2张图片
    • 视频格式必须按照下图进行设置,否则在手机上会有问题:
    • unity 手机端和编辑器下播放带有透明通道的视频详解_第3张图片
    • 其中最主要的就是keep alpha的勾选和codec格式设置为VP8
    • 然后将视频拖拽到videoPlayer组件就可以了
  2. 多个视频需要代码动态切换播放
    • 我的第一想法是通过url加载,方便快捷,可是经测试发现,在编辑器上没有任何问题,但是导入到手机运行,就会发现alpha通道不见了,背景保留的plane的颜色,最后在unity论坛中找到了解释,说是这是目前unity 版本的一个bug,可能后续版本会优化,所以我就采用了通过resource文件夹加载视频文件进行播放的方式。
    • 将视频放到Resources中,然后通过代码的方式进行加载,赋值为videoPlayer组件:
          //初始化视频组件
          void InitVideo()
          {
              if (videoPlayer == null)
              {
                  videoPlayer = gameObject.GetComponent();
              }
              StartCoroutine(LoadVideo());
          }
      
          //根据名字加载所需的视频
          IEnumerator LoadVideo()
          {
              ResourceRequest resource = Resources.LoadAsync(videoName, typeof(VideoClip));
              while (!resource.isDone)
              {
                  yield return 0;
              }
              videoPlayer.source = VideoSource.VideoClip;
              videoPlayer.clip = resource.asset as VideoClip;
              videoPlayer.isLooping = true;
              videoPlayer.Play();
          }

      然后直接运行就可以了。效果如下:

unity 手机端和编辑器下播放带有透明通道的视频详解_第4张图片

二、通过插件AvPro进行实现

1.通过demo发现,这里就需要与他们匹配的视频格式进行处理,下面先大致讲一下视频的制作流程:

  • 保证视频底色为纯色 尽量不要与视频中的有同样的颜色  这里我们以绿色背景为例测试:
  • 将视频导入到AE中   记住视频的分辨率,如下图:

    • 创建一个新的合成组1,将其像素大小设置为视频的分辨率大小
    • 将视频放到新建的合成组1中,然后右键选择视频选择效果  颜色键,具体如下图:
    • unity 手机端和编辑器下播放带有透明通道的视频详解_第5张图片
    • 然后点击特效控制台中的键颜色的吸管吸取背景色 ,同时调整参数,是达到自己想要的效果:
    • unity 手机端和编辑器下播放带有透明通道的视频详解_第6张图片
    • 这时候在合成组1中添加一个白色固态层,并将轨道蒙版设置为alpha,就会得到下面的视频效果:
    • unity 手机端和编辑器下播放带有透明通道的视频详解_第7张图片
    • 这时候新建合成组2,像素大小设置为之前的宽度的两倍,便于将两个视频,对称放置.
    • 然后将合成组1和视频分别放到合成组2中,并对称放置:
    • unity 手机端和编辑器下播放带有透明通道的视频详解_第8张图片
    • 导出合成组2中的视频文件,可以AVI格式视频文件,最后可以通过格式工厂转换成自己想要的mp4格式的文件,这样视频素材就准备好了。

    2.将上面准备好的视频放置到StreamingAssets文件夹下,后续方便通过url方式加载视频 

  •  创建一个plane

  • 创建一个MediaPlayer组件:

  • unity 手机端和编辑器下播放带有透明通道的视频详解_第9张图片

  • 将MediaPlayer的视频读取方式设置为左右还是上下方式,这里我们设置为左右方式:

  • unity 手机端和编辑器下播放带有透明通道的视频详解_第10张图片

  • 在plane上添加ApplyToMesh组件,同时将创建的MediaPlayer拖拽到相应的位置:

  • unity 手机端和编辑器下播放带有透明通道的视频详解_第11张图片

  • 然后创建一个材质球到plane上:

  • unity 手机端和编辑器下播放带有透明通道的视频详解_第12张图片

  • 下面通过代码方式播放想播放的视频:

         void InitVideo()
        {
            if (mediaPlayer == null)
            {
                mediaPlayer = gameObject.GetComponent();
            }
            mediaPlayer.m_VideoPath = Application.streamingAssetsPath + "/" + name;
            mediaPlayer.Play();
        }

    播放效果为:

  • unity 手机端和编辑器下播放带有透明通道的视频详解_第13张图片

  • 下面是工程的链接:链接:https://pan.baidu.com/s/1zOmy2mgSK5I02BZZD_sEhw 密码:rjcz

想了解更多unity相关小知识,可以关注下方公众号或者添加QQ群:879354767:

unity 手机端和编辑器下播放带有透明通道的视频详解_第14张图片

 

 

 

 

你可能感兴趣的:(unity,unity,视频播放,alpha)