Unity 基础 之 在 UGUI 上简单实现VideoPlayer视频播放的功能，简单暂停播放/显示视频名称/显示时长/拖拽播放等

 

目录

Unity 基础 之 在 UGUI 上简单实现VideoPlayer视频播放的功能，简单暂停播放/显示视频名称/显示时长/拖拽播放等

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

六、关键代码

---

 

一、简单介绍

Unity中的一些基础知识点。

本节介绍，在 Unity 中，简单实现在 UGUI 上播放视频的简单功能，可以额简单的显示视频名称，显示视频播放时长，拖拽进度等操作，便于后期使用，有不对，欢迎指正。

 

二、实现原理

1、VideoPlayer 播放后，把 rawImage.texture = videoPlayer.texture 渲染在UGUI上

2、VideoPlayer .time 和 VideoPlayer .clip.length 得到当前播放的事件和总时长，之间的比值得到播放进度

3、VideoPlayer 暂停播放 VideoPlayer.Play()/ VideoPlayer.Pause()

 

三、注意事项

1、这里使用 Slider 显示播放进度，但是 Slider 点击已经不能控制手动设置进度了，使用 SliderDragEvent 拖拽控制进度

2、SliderDragEvent  的事件必须写在本脚本内，不能委托事件显示（这里好奇怪啊，指导的同学，不吝赐教哈）

 

四、效果预览

 

五、实现步骤

1、打开Unity，新建空工程

 

2、在场景中，搭建UI，播放视频，和各个显示或者操作

 

3、在工程中新建脚本，VideoPlayerModule 实现播放视频，显示时间、进度、视频播放暂停等功能，SliderDragEvent 实现视频拖拽进度的功能

 

4、把 VideoPlayerModule 脚本挂载到 场景中，并对应赋值

5、把 SliderDragEvent 脚本挂载到 VideoTime_Slider 上实现拖拽进度，并对应赋值

 

6、运行场景（或打包到移动设备上），效果如上

 

六、关键代码

1、VideoPlayerModule

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

[RequireComponent(typeof(VideoPlayer))]
public class VideoPlayerModule : MonoBehaviour
{
    [Header("视频")]
    public VideoClip videoClip;         // 视频的文件 参数

    [Header("视频播放的RawImage")]
    public RawImage rawImage;

    [Header("视频时间条相关")]
    public Text videoTimeText;          // 视频的时间 Text
    public Text videoNameText;          // 视频的名字 Text
    public Slider videoTimeSlider;      // 视频的时间 Slider


    [Header("视频播放和暂停")]
    public Text text_PlayOrPause;
    public Button button_PlayOrPause;


    // Use this for initialization

    void Start()
    {
        Init();

        videoPlayer.Play();
        SetVideoPlayEndAction(()=> { Debug.Log("视频播放结束"); });
    }

    /// <summary>
    /// 设置视频结束事件
    /// </summary>
    /// <param name="VideoPlayEndListener"></param>
    public void SetVideoPlayEndAction(Action VideoPlayEndListener) {
        VideoPlayEndAction = VideoPlayEndListener;
    }


    /// <summary>
    /// 初始化一些数据
    /// </summary>
    void Init() {
        videoPlayer = GetComponent<VideoPlayer>();
        videoPlayer.clip = videoClip;
        videoNameText.text = videoClip.name;
        clipHour = (int)videoPlayer.clip.length / 3600;
        clipMinute = (int)(videoPlayer.clip.length - clipHour * 3600) / 60;
        clipSecond = (int)(videoPlayer.clip.length - clipHour * 3600 - clipMinute * 60);
        isVideoPlayeEnd = false;
    }

    // Update is called once per frame

    void Update()
    {

        UpdateVideoFrame();

        if (Input.GetKeyDown(KeyCode.P)) {
            videoPlayer.Play();
        }
    }

    /// <summary>
    /// 每帧刷新视频
    /// </summary>
    void UpdateVideoFrame() {

        //如果videoPlayer没有对应的视频texture，则返回
        if (videoPlayer.texture == null)
        {
            return;
        }

        if (videoPlayer.isPlaying ==true) {
            //把VideoPlayerd的视频渲染到UGUI的RawImage
            rawImage.texture = videoPlayer.texture;
            ShowVideoTime();

            
        }

        if (isVideoPlayeEnd ==false  && videoPlayer.time>= videoClip.length) {
            isVideoPlayeEnd = true;
            videoPlayer.Stop();
            text_PlayOrPause.text = "重新播放";

            if (VideoPlayEndAction != null) {
                VideoPlayEndAction();
            }
            
            
        }

        Debug.Log("videoPlayer.isPlaying :"+ videoPlayer.isPlaying);
        
    }

    /// <summary>
    /// 显示当前视频的时间
    /// </summary>
    private void ShowVideoTime()
    {

        // 当前的视频播放时间
        currentHour = (int)videoPlayer.time / 3600;
        currentMinute = (int)(videoPlayer.time - currentHour * 3600) / 60;
        currentSecond = (int)(videoPlayer.time - currentHour * 3600 - currentMinute * 60);

        // 把当前视频播放的时间显示在 Text 上
        videoTimeText.text = string.Format("{0:D2}:{1:D2}:{2:D2} / {3:D2}:{4:D2}:{5:D2}",
            currentHour, currentMinute, currentSecond, clipHour, clipMinute, clipSecond);

        // 把当前视频播放的时间比例赋值到 Slider 上
        videoTimeSlider.value = (float)(videoPlayer.time / videoPlayer.clip.length);

        //设置相关按钮监听事件
        button_PlayOrPause.onClick.AddListener(OnPlayOrPauseVideo);

    }

    /// <summary>
    /// 当前的 Slider 比例值转换为当前的视频播放时间
    /// </summary>
    private void SetVideoTimeValueChange()
    {

        videoPlayer.time = videoTimeSlider.value * videoPlayer.clip.length;

    }

    /// <summary>
    /// 播放和暂停当前视频
    /// </summary>
    private void OnPlayOrPauseVideo()
    {
  

        //判断视频播放情况，播放则暂停，暂停就播放，并更新相关文本
        if (videoPlayer.isPlaying == true)
        {

            videoPlayer.Pause();
            text_PlayOrPause.text = "播放";

        }
        else {
            videoPlayer.Play();
            isVideoPlayeEnd = false;            
            text_PlayOrPause.text = "暂停";
        }


        

        

    }

    #region 私有参数
    //定义参数获取VideoPlayer组件和RawImage组件
    internal VideoPlayer videoPlayer;

    // 当前视频的总时间值和当前播放时间值的参数
    private int currentHour;
    private int currentMinute;
    private int currentSecond;
    private int clipHour;
    private int clipMinute;
    private int clipSecond;

    // 视频播放结束事件
    Action VideoPlayEndAction;
    bool isVideoPlayeEnd = false;

    #endregion
}

 

2、SliderDragEvent

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;


public class SliderDragEvent : MonoBehaviour, IDragHandler
{
    [SerializeField]
    private VideoPlayerModule videoPlayerModule;        // 视频播放的脚本

    private void Start()
    {
        
    }

    /// <summary>
    /// 给 Slider 添加 拖拽事件
    /// </summary>
    /// <param name="eventData"></param>
    public void OnDrag(PointerEventData eventData)
    {

        SetVideoTimeValueChange();

    }

    /// <summary>
    /// 当前的 Slider 比例值转换为当前的视频播放时间
    /// </summary>
    private void SetVideoTimeValueChange()
    {

        videoPlayerModule.videoPlayer.time = videoPlayerModule.videoTimeSlider.value * videoPlayerModule.videoPlayer.clip.length;

    }

}