Unity3D plays a video with a draggable progress bar in the scene

1. Right-click in the scene of the 3D project -> UI -> Canvas, and the EventSystem will automatically appear when the Canvas is created.

2. Right click in Canvas->UI->Raw Image, create a Raw Image to place the video to be played.

3. If you want the Raw Image to play the video, you need to click Add Component in the Raw Image to add the Video Player component.

4. Add the video to be played in Assets, then right-click->Create->Render Texture, create a Render Texture and rename it to video, and change the Size to 1024*1024.

5. Add the video to the Video Clip of the Raw Image, and add the newly created video (Render Texture) to the Target Texture.

6. Right click on the Raw Image->UI->Legacy->Button, create a Button, rename it to pause, change the Text under pause to “Pause”, change the Font Style to Bold, Font Size to 30, pause Change the height to 50.

7. Right-click in Assets->Create->Folder, create a folder and rename it to Scripts, right-click in Scripts->Create->C# Script, and rename it to Movie.

8. Movie Code

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

public class Movie : MonoBehaviour
{
    public Text text_PlayOrPause;
    public Button button_PlayOrPause;
    private VideoPlayer videoPlayer;
    private RawImage rawImage;
    private int flag = 0;

    void Start()
    {
        videoPlayer = this. GetComponent<VideoPlayer>();
        rawImage = this. GetComponent<RawImage>();
        button_PlayOrPause.onClick.AddListener(PlayorPause);
    }

    void Update()
    {
        if(flag == 0)
        {
            if(videoPlayer. texture == null)
            {
                return;
            }
            else
            {
                rawImage.texture = videoPlayer.texture;
                flag ++ ;
            }
        }
    }

    void PlayorPause()
    {
        if(videoPlayer.isPlaying == true)
        {
            videoPlayer. Pause();
            text_PlayOrPause.text = "PlayOrPause";
            Time. timeScale = 0;
        }
        else
        {
            videoPlayer. Play();
            text_PlayOrPause.text = "Pause";
        }
    }

}

9. Drag Movie into Raw Image, set Text_Play Or Pause to Text under pause, and set Button_Play Or Pause to pause.

10. If the video you want to play is a normal effect, you need to change the height and width of the Raw Image. This video is changed to a width of 700 and a height of 350 (the specific video should be modified accordingly). If the desired effect is not achieved, you can change it in Click the fourth tool icon in the Scene on the left to zoom the video. Changing the aspect ratio and rescaling keeps the aspect ratio.

11. If you want the video to be able to drag the progress bar, you need to right click in the Raw Image -> UI -> Slider, create a Slider, change the length of the Slider (use the fifth tool icon in the Scene on the left), and adjust its position position below the video. Click Slider->Fill Area->Fill, and change the color of Fill to green.

12. Right click in Scripts->Create->C# Script, and rename it to VideoPlayerControl.

VideoPlayerControl code

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

public class VideoPlayerControl : MonoBehaviour
{
    public VideoPlayer videoPlayer;
    public Slider slider;

    private bool is Dragging;

    void Start()
    {
        // Register the drag event of the slider
        slider.onValueChanged.AddListener(OnSliderValueChanged);
    }

    void Update()
    {
        // If the slider is being dragged, the time is not updated
        if (!isDragging)
        {
            slider.value = (float)videoPlayer.time / (float)videoPlayer.length;
        }
    }

    // Executed when the value of the slider changes
    void OnSliderValueChanged(float value)
    {
        videoPlayer.time = videoPlayer.length * value;
    }

    // Executed when the slider is started to be dragged
    public void OnSliderDragBegin()
    {
        isDragging = true;
        videoPlayer. Pause();
    }

    // Executed when dragging the slider is finished
    public void OnSliderDragEnd()
    {
        isDragging = false;
        videoPlayer. Play();
    }
}

13. Drag VideoPlayerControl into Raw Image, set Video Player to Raw Image, and Slider to Slider.

14. Click to run the project to play the video. Click the corresponding position in the slider to change the progress of the video. It is more convenient to drag the progress bar after pausing the video. Dragging may freeze when the video is playing.