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

快来打我* 2022-12-06 04:28 195阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

# 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  的事件必须写在本脚本内，不能委托事件显示（这里好奇怪啊，指导的同学，不吝赐教哈）

## 四、效果预览 ##

![20200912161643589.gif][]

## 五、实现步骤 ##

1、打开Unity，新建空工程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 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;
    
        }
    
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20221123/bda90fe0e3bc45c9835338ede998726e.png
[20200912161643589.gif]: /images/20221123/84b209ff68e24ca0a0e98d5482113128.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20221123/c599db3e1ed54aa58483f47536470f60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20221123/f5d28710d3e248699d9cd204e441d3f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20221123/253533572d6d4f6d880b085727208357.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20221123/331325aa4806448e94248bc5d1cbff12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20221123/3119a2d09f6a4412aa194ddebb61fe95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20221123/3ef2ba151132465b92ef57d18a829454.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7]: /images/20221123/eba45910d1504893b8d965f4c24d3dde.png