欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能

程序员文章站 2024-01-11 20:15:22
...

Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能

前言

我在之前的博客里介绍过关于VideoPlayer的简单使用流程,之前一直想研究下videoPlayer中的使用进度条控制视频播放进度及声音大小的功能,一直没有时间去研究。在之前的项目中,很巧合的实现了这个功能,于是在这篇博客中将之前的技术做个总结,写在这里。实现效果如下图所示:
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能

实现步骤

1.编写视频播放脚本,脚本代码如下所示:

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

namespace MoviePlay
{
    public class PlayVideo : MonoBehaviour
    {
        #region 参数
        //定义参数获取video组件和RawImage组件
        public VideoPlayer videoPlayer;

        public RawImage rawImage;

        public string[] movieUrl;

        internal bool isPlay = false;
        //声音播放组件
        public AudioSource thisAudioSource;
        //是否静音
        bool isMute = false;
        //游戏管理类
        //ThisGameManager gameManager;
        //控制按钮上的文字
        //public Text bofangText;
        //按钮图片
        public Image bofangButtonImage;
        //按钮图片精灵数组
        public Sprite[] thisSprite;
        //Slider
        public Slider videoTimeSlider;
        //音量控制Slider
        public Slider yinSlider;

        #endregion

        #region 基本方法
        // Use this for initialization
        void Start()
        {
            BeginString();
        }

        // Update is called once per frame
        void Update()
        {
            PlayMovie();
        }

        #endregion

        #region 私有方法
        /// <summary>
        /// 初始化数据
        /// </summary>
        void BeginString()
        {
            //videoPlayer = GameObject.Find("moviePlayManager").GetComponent<VideoPlayer>();
            //thisAudioSource = GameObject.Find("moviePlayManager").GetComponent<AudioSource>();
            //gameManager = GameObject.Find("Canvas").GetComponent<ThisGameManager>();
            //movieUrl[0] = Application.streamingAssetsPath + "/视频/0.mp4";
            isPlay = false;
        }

        /// <summary>
        /// 播放视频函数
        /// </summary>
        void PlayMovie()
        {
            //如果videoPlayer没有对应的视频texture,则返回
            if (videoPlayer.texture == null)
            {
                return;
            }
            //把VideoPlay的视频渲染到UGUI的RawImage上
            rawImage.texture = videoPlayer.texture;
            videoTimeSlider.value = (float)(videoPlayer.time / videoPlayer.clip.length);
            //videoTimeSlider.value = (float)(videoPlayer.time);
            if (isPlay)
            {
                if (videoPlayer.frame == (long)videoPlayer.frameCount)
                {
                    //gameManager.ToMovieEnd();
                }
            }
        }

        /// <summary>
        /// 播放视频0逻辑
        /// </summary>
        public void ToPlayThis0()
        {
            //videoPlayer.url = movieUrl[0];
            StartCoroutine(ToPlay0());
        }

        /// <summary>
        /// 播放视频0的协程
        /// </summary>
        /// <returns></returns>
        IEnumerator ToPlay0()
        {
            yield return new WaitForSeconds(0.1f);
            BeginPlay();
        }

        /// <summary>
        /// 重播
        /// </summary>
        public void ToReStartVideo()
        {
            videoPlayer.Play();
            isPlay = true;
        }

        /// <summary>
        /// 开始播放视频
        /// </summary>
        void BeginPlay()
        {
            if (!isPlay)
            {
                videoPlayer.Play();
                isPlay = true;
            }
        }

        /// <summary>
        /// 停止播放视频
        /// </summary>
        public void StopPlay()
        {
            if (isPlay)
            {
                videoPlayer.Stop();
                isPlay = false;
            }
        }

        /// <summary>
        /// 暂停播放视频逻辑
        /// </summary>
        public void PauseThis()
        {
            if (isPlay)
            {
                videoPlayer.Pause();
                isPlay = false;
                //bofangText.text = "播放";
                bofangButtonImage.sprite = thisSprite[1];
                //Debug.Log("123");
            }
            else
            {
                videoPlayer.Play();
                isPlay = true;
                //bofangText.text = "暂停";
                bofangButtonImage.sprite = thisSprite[0];
            }
        }

        /// <summary>
        /// 增加音量逻辑
        /// </summary>
        public void AddVolume()
        {
            thisAudioSource.volume += 0.1f;
        }

        /// <summary>
        /// 减小音量逻辑
        /// </summary>
        public void DecreaseVolume()
        {
            thisAudioSource.volume -= 0.1f;
        }

        /// <summary>
        /// 使用Slider改变音量
        /// </summary>
        public void ToChaneMute() 
        {
            thisAudioSource.volume = yinSlider.value;
        }

        /// <summary>
        /// 静音功能
        /// </summary>
        public void MuteVolume()
        {
            if (!isMute)
            {
                thisAudioSource.mute = true;
                isMute = true;
            }
            else
            {
                thisAudioSource.mute = false;
                isMute = false;
            }
        }

        public void ToAddVideo()
        { 
            videoPlayer.time += 0.01f * videoPlayer.clip.length;
            //Debug.Log(videoPlayer.time.ToString());
        }
        public void ToDelVideo()
        {
            videoPlayer.time -= 0.01f * videoPlayer.clip.length;
            //Debug.Log(videoPlayer.time.ToString());
        }

        #endregion
    }
}

2.在场景中创建一个空物体,将videoPlayer等组件挂载到上面,并且将PlayVideo脚本挂载到该物体上(特别提示:videoPlayer视频的加载一定要选择VideoClip,不能使用URL,否则使用进度条控制时会报错),如下图所示:
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能
3.搭建如下所示UI,用于实现进度条控制视频的前进和后退以及音量的控制等,UI搭建如下图所示:
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能
4.创建UIInfo0.cs脚本,该脚本的功能是实现类似于苹果播放器中那种点击到进度条进度条才显示的功能,脚本代码如下图所示:

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

namespace UIManager
{
	public class UIInfo0 : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
	{
		//播放控制面板
		public GameObject boFangImage;

		/// <summary>
		/// 鼠标进入逻辑
		/// </summary>
		/// <param name="eventData"></param>
		public void OnPointerEnter(PointerEventData eventData)
		{
			
		}

		/// <summary>
		/// 鼠标出逻辑
		/// </summary>
		/// <param name="eventData"></param>
		public void OnPointerExit(PointerEventData eventData)
		{
			boFangImage.SetActive(false);
		}
	}
}

5.将UIInfo0.cs脚本挂载到场景中的boFangControlImage0物体上,并且将自身赋值到脚本上,如下图所示:
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能
6.创建UIInfo.cs脚本,该脚本的作用同上,也是控制进度条物体显隐的,脚本代码如下图所示:

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


namespace UIManager
{
	public class UIInfo : MonoBehaviour,IPointerEnterHandler,IPointerExitHandler
	{
		//播放控制面板
		public GameObject boFangImage;

		/// <summary>
		/// 鼠标进入逻辑
		/// </summary>
		/// <param name="eventData"></param>
		public void OnPointerEnter(PointerEventData eventData)
		{
			boFangImage.SetActive(true);
			//Debug.Log("123");
		}

		/// <summary>
		/// 鼠标出逻辑
		/// </summary>
		/// <param name="eventData"></param>
		public void OnPointerExit(PointerEventData eventData)
		{
			
		}
	}
}

7.将UIInfo.cs脚本挂载到场景中的boFangControlImage物体上,同时将boFangControlImage0物体赋值到该物体上,如下图所示:
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能8.创建SliderManager.cs脚本,该脚本的作用是实现拖拽进度条控制播放进度的功能,代码如下所示:

using MoviePlay;
using System.Collections;
using UnityEngine;
using UnityEngine.EventSystems;
/// <summary>
/// 继承 拖拽接口
/// </summary>
public class SliderManager : MonoBehaviour, IDragHandler, IEndDragHandler
{
    [SerializeField]
    public PlayVideo toPlayVideo;        // 视频播放的脚本

    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }

    /// <summary>
    /// 给 Slider 添加开始拖拽事件
    /// </summary>
    /// <param name="eventData"></param>
    public void OnDrag(PointerEventData eventData)
    {
        toPlayVideo.videoPlayer.Pause();
        SetVideoTimeValueChange();
    }

    /// <summary>
    /// 当前的 Slider 比例值转换为当前的视频播放时间
    /// </summary>
    private void SetVideoTimeValueChange()
    {
        toPlayVideo.videoPlayer.time = toPlayVideo.videoTimeSlider.value * toPlayVideo.videoPlayer.clip.length;
        //toPlayVideo.videoPlayer.time = toPlayVideo.videoTimeSlider.value;
    }

    /// <summary>
    /// 给 Slider 添加结束拖拽事件
    /// </summary>
    /// <param name="eventData"></param>
    public void OnEndDrag(PointerEventData eventData)
    {
        toPlayVideo.videoPlayer.Play();
    }
}

9.将SliderManager.cs脚本挂载到控制播放进度的boFangSlider物体上,并且将videoPlayManager物体赋值到脚本上,如下图所示:
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能10.将videoPlayManager赋值到yinControlSlider的方法中,用于控制音量,如下图所示:
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能11.将各个物体赋值到PlayVideo物体上,如下图所示:
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能12.运行工程,我们已经实现了通过进度条控制播放进度和音量的功能,如下图所示:

Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能

工程相关

工程Demo