Unity发布WebGL播放视频【免插件，可快进后退，复制脚本即可使用】

写在前边

　　在做公司项目时，需要播放一个视频，但是由于发布平台为Web，所以使用默认的VideoPlayer来实现的话，会导致播放失败，下面来讲解一下我的实现方法。免插件，直接导入项目即可使用。可快进，后退，暂停，支持大视频播放，加载快速，播放快进无卡顿

        关于webgl项目运行问题，请移步Unity发布WebGL运行问题。

正文

　    创建UI界面

　　本人实现方法还是基于VideoPlayer组件，所以首先创建UI组件VideoPanel，搭建播放器UI。如下图所示，请忽略博主没有审美的UI。

　　VideoImage：播放视频Image组件，由RawImage组件和VideoPlayer组件组成。并创建RenderTexture赋予VideoPlayer组件中TargetTexture属性与RawImage组件中Texture属性。并将VideoPlayer组件中Source属性设置为URL。

　　Slider：视频进度条。

　　PlayerBtn/PauseBtn：播放/暂停按钮。

       视频处理

       对于发布WebGL平台，需要将视频资源转换为ovg格式，使用ogv是由于WebGL平台不支持mp4格式，并且ogv格式支持大视频播放，博主使用该方法播放100多M的视频，依然播放顺畅。

      分享一下视频转换工具，具体使用方法还请自己研究。

      视频转换工具GitHub地址：https://github.com/WhoWhenLone/Mp4ToOgv

      创建StreamingAssets文件夹，将视频资源放在该文件夹下。

      添加播放控制器脚本

      将该脚本添加到VideoPanel下，并将组件拖拽赋值。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Video;
using UnityEngine.Events;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class VideoController : MonoBehaviour
{
    //视频名称
    public string videoName;
    //videoImage组件
    public GameObject VideoImage;
    //进度条组件
    public GameObject SliderController;
    //播放按钮
    public GameObject PlayBtn;
    //暂停按钮
    public GameObject PauseBtn;
    //public GameObject CenterPlayBtn;
    //视频纹理
    public RenderTexture renderTexture;
    //视频第一帧
    public GameObject FirstFrameImage;
    //视频时长
    public float Length;
    //
    private bool isDrag = false;

    // Use this for initialization
    private void Awake()
    {
        InitVideo(renderTexture);
    }
    void Start()
    {
        #region 注册事件
        PlayBtn.GetComponent().onClick.AddListener(PlayVideo);
        //CenterPlayBtn.GetComponent().onClick.AddListener(PlayVideo);
        PauseBtn.GetComponent().onClick.AddListener(PauseVideo);
        AddTriggersListener(SliderController, EventTriggerType.BeginDrag, OnBeginDrag);
        AddTriggersListener(SliderController, EventTriggerType.EndDrag, OnEndDrag);
        #endregion

    }

    // Update is called once per frame
    void Update()
    {
        ChangeSliderValue();
        ChangeVideoPlayTime();
        Debug.Log("Isdrag" + isDrag);
        if (!gameObject.GetComponentInChildren().isPlaying)
        {
            PauseVideo();
        }
    }
    /// 

    /// 初始化视频控制器
    /// 
    public void InitVideoController()
    {
        PlayBtn.SetActive(true);
        //CenterPlayBtn.SetActive(true);
        PauseBtn.SetActive(false);
        PauseVideo();
    }
    /// 

    /// 初始化videoplayer
    /// 
    public void InitVideo(RenderTexture renderTexture)
    {
        DestroyImmediate(gameObject.transform.Find("VideoImage").gameObject.GetComponent());
        gameObject.transform.Find("VideoImage").gameObject.AddComponent();
        VideoPlayer videoPlayer = gameObject.GetComponentInChildren();
        videoPlayer.source = VideoSource.Url;
        videoPlayer.renderMode = VideoRenderMode.RenderTexture;
        videoPlayer.playOnAwake = false;
        videoPlayer.targetTexture = renderTexture;

        //适配平台
        if (Application.platform == RuntimePlatform.WebGLPlayer)
        {
            videoPlayer.url = Application.dataPath + "/StreamingAssets/Video/" + videoName + ".ogv";
        }
        else if (Application.platform == RuntimePlatform.WindowsPlayer || Application.platform == RuntimePlatform.WindowsEditor)
        {
            videoPlayer.url = Application.dataPath + "/StreamingAssets/Video/" + videoName + ".mp4";
        }

        videoPlayer.audioOutputMode = VideoAudioOutputMode.None;
        videoPlayer.Prepare();
        //设置slider 长度
        SliderController.GetComponent().maxValue = Length;
        if (FirstFrameImage != null)
        {
            FirstFrameImage.SetActive(true);
        }

        PauseVideo();
    }
    /// 

    /// 播放
    /// 
    private void PlayVideo()
    {
        gameObject.GetComponentInChildren().Play();
        PlayBtn.SetActive(false);
        //CenterPlayBtn.SetActive(false);
        PauseBtn.SetActive(true);
        if (FirstFrameImage != null)
        {
            FirstFrameImage.SetActive(false);
        }

    }
    /// 

    /// 暂停
    /// 
    public void PauseVideo()
    {
        gameObject.GetComponentInChildren().Pause();
        PlayBtn.SetActive(true);
        //CenterPlayBtn.SetActive(true);
        PauseBtn.SetActive(false);
        FirstFrameImage.SetActive(true);
    }

    /// 

    /// 修改视频播放进度
    /// 
    private void ChangeVideoPlayTime()
    {
        if (isDrag == true)
        {
            gameObject.transform.Find("VideoImage").gameObject.GetComponent().time = SliderController.GetComponent().value;
        }
    }
    /// 

    /// 修改进度条
    /// 
    private void ChangeSliderValue()
    {
        if (!isDrag)
        {
            SliderController.GetComponent().value = (float)gameObject.transform.Find("VideoImage").gameObject.GetComponent().time;
        }
    }
    /// 

    /// 开始拖拽
    /// 
    /// 
    private void OnBeginDrag(BaseEventData enenvt)
    {
        isDrag = true;
    }
    /// 

    /// 结束拖拽
    /// 
    /// 
    private void OnEndDrag(BaseEventData enenvt)
    {
        isDrag = false;
        gameObject.transform.Find("VideoImage").gameObject.GetComponent().time = SliderController.GetComponent().value;
    }


    /// 

    /// 为obj添加Eventrigger监听事件
    /// 
    /// 添加监听的对象
    /// 添加的监听类型
    /// 触发的函数
    private void AddTriggersListener(GameObject obj, EventTriggerType eventType, UnityAction action)
    {
        //首先判断对象是否已经有EventTrigger组件，若没有那么需要添加
        EventTrigger trigger = obj.GetComponent();
        if (trigger == null)
        {
            trigger = obj.AddComponent();
        }
        //实例化delegates
        if (trigger.triggers.Count == 0)
        {
            trigger.triggers = new List();//  
        }
        //定义所要绑定的事件类型 
        EventTrigger.Entry entry = new EventTrigger.Entry();
        //设置事件类型  
        entry.eventID = eventType;
        //定义回调函数  
        UnityAction callback = new UnityAction(action);
        //设置回调函数  
        entry.callback.AddListener(callback);
        //添加事件触发记录到GameObject的事件触发组件  
        trigger.triggers.Add(entry);
    }
}

最后  

　   案例GitHub地址：https://github.com/WhoWhenLone/UnityComponent/tree/master/VedioPlayerForWeb

      至此，便实现了适配WebGL平台下视频播放器。建议在使用时，导为Prefab，导出为UnityPackage资源，方便在不同项目中直接使用。