在Unity3D發佈的WebGL中實現場景視頻播放的功能

Unity場景中播放視頻可以通過在3D的Cube面上添加MovieTexture得來，但在最終生成WebGL應用時會報錯，原因是Web端不支持MovieTexture的播放，網上查閱了許多資料，整理了一下，也讓後來者少走點彎路。

 

1.首先需要下載一個名爲Simple MovieTextures for Unity WebGL的Unity插件，插件下載鏈接：

鏈接：https://pan.baidu.com/s/1JJBYiSg5adz5Q2iUWf7E_g 
提取碼：zyg2

 

2.將插件下載後導入Unity

導入的unitypackage文件的組成如下，可以看到Sample中有一個demo場景和VideoTest腳本，這兩個文件可以讓我們快速應用，插件的功能能可以通過README.txt查看。

加載上圖中的SampleScene場景，並打開VideoTest腳本查看使用方法。場景中只包括一個Cube，將腳本放入並生成WebGL即可看到播放效果。（注意，不能直接調試！）

3.代碼分析

打開 VideoTest腳本，對代碼進行分析。

 

頭文件（除了兩個基本的，還要加入第三個）

 

using UnityEngine;
using System.Collections;
using System.Runtime.InteropServices;

Start（）方法        

    WebGLMovieTexture tex;    //創建視頻紋理信息
            public GameObject cube;    //選取視頻播放所用的Cube

            void Start () {
                        tex = new WebGLMovieTexture("StreamingAssets/Chrome_ImF.mp4");
                        cube.GetComponent<MeshRenderer>().material = new Material (Shader.Find("Diffuse"));
                        cube.GetComponent<MeshRenderer>().material.mainTexture = tex;
            }

 

 

Update（）方法

 

void Update()
            {
                        tex.Update();
                        cube.transform.Rotate (Time.deltaTime * 10, Time.deltaTime * 30, 0);
            }

 

並且提供了GUI控件功能

 

            void OnGUI()
            {
                        GUI.enabled = tex.isReady;
                        
                        GUILayout.BeginHorizontal();
                        if (GUILayout.Button("Play"))    //播放按鈕
                                    tex.Play();
                        if (GUILayout.Button("Pause"))    //暫停按鈕
                                    tex.Pause();
                        tex.loop = GUILayout.Toggle(tex.loop, "Loop");    //是否循環
                        GUILayout.EndHorizontal();

                        var oldT = tex.time;
                        var newT = GUILayout.HorizontalSlider (tex.time, 0.0f, tex.duration);
                        if (!Mathf.Approximately(oldT, newT))
                                    tex.Seek(newT);

                        GUI.enabled = true;
            }

 

爲了只實現播放功能，只使用如下代碼即可。

 

WebGLMovieTexture tex;    //創建視頻紋理信息
            public GameObject cube;    //選取視頻播放所用的Cube

            void Start () {
                        tex = new WebGLMovieTexture("StreamingAssets/Chrome_ImF.mp4");
                        cube.GetComponent<MeshRenderer>().material = new Material (Shader.Find("Diffuse"));
                        cube.GetComponent<MeshRenderer>().material.mainTexture = tex;
            }

void Update()
            {
                        tex.Update();
                        tex.Play();
            }

 

即可實現基本功能。

 

效果如下