Does anyone know how to play videos in webgl?

[Unity-Artcraft]

I already use streamingassets and videoPlayer.url = System.IO.Path.Combine (Application.streamingAssetsPath,"myFile.mp4"); and it doesn’t work, first frame pops up in chrome and that’s all.?

In my script:

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

public class SliderVideo : MonoBehaviour
{
    [SerializeField] VideoPlayer video;
    [SerializeField] Slider videoSlider;
    [SerializeField] Slider volumeSlider;
    [SerializeField] Button playButton;
    [SerializeField] RawImage fullScreenImage;

    [SerializeField] RectTransform buttons;
    [SerializeField] Vector3 buttonsPos;
    Vector3 buttonsPosCache;

    [SerializeField] TextMeshProUGUI buttonLanguage;
    [SerializeField] GameObject disableButton;

    //[SerializeField] GameObject videoRectangle;

    int cacheWidth, cacheHeight;

    float videoWidth, videoHeight;
    float videoWidthCache, videoHeightCache;

    double videoTimeCache;
    bool fullScreen;

    float timerMouse;
    public bool languageChange = false;

    public string videoFileName;
    public string videoFileNameEN;
    public string videoFileNameDE;

    //Start

    private void Start()
    {

        playButton.image.sprite = Resources.LoadAll<Sprite>("icons")[25];

        //videoRectangle.SetActive(false);
        videoHeight = fullScreenImage.gameObject.GetComponent<RectTransform>().sizeDelta.y;
        videoWidth = fullScreenImage.gameObject.GetComponent<RectTransform>().sizeDelta.x;
        buttonsPosCache = buttons.anchoredPosition;

    }

    //Update

    private void Update()
    {
        if (video.isPlaying)
        {
            if (!video.isPrepared) return;

            videoSlider.value = (float)NTime;
            video.SetDirectAudioVolume(0, volumeSlider.value);
        }

        if (fullScreen)
        {
            if (Input.GetAxis("Mouse X") != 0 || Input.GetAxis("Mouse Y") != 0)
            {
                timerMouse = 0;
                buttons.gameObject.SetActive(true);

            }
            else
            {
                timerMouse += Time.deltaTime;

                if (timerMouse > 3)
                {
                    timerMouse = 3;
                    buttons.gameObject.SetActive(false);
                }
            }
        }

    }
    public ulong Duration
    {
        get { return (ulong)(video.frameCount / video.frameRate); }
    }
    public double VideoTime
    {
        get { return video.time; }
    }

    public double NTime
    {
        get { return VideoTime / Duration; }
    }

    //Prepare Method

    public void LoadVideo(string source)
    {
        video.url = System.IO.Path.Combine(Application.streamingAssetsPath, source);
        video.Prepare();
    }

    //Methods for Buttons

    public void PlayVideo()
    {
        //(!IsPrepared && IsPlaying) return ;
        video.Play();
    }

    public void PauseVideo()
    {
        if (!video.isPlaying) return;
        video.Pause();
    }

    public void SeekSlider()
    {
        video.time = (videoSlider.value * Duration);
    }

    public void PauseResume()
    {
        //if (!IsPrepared) return ;
        //videoRectangle.SetActive(true);

        if (video.isPlaying)
        {
            playButton.image.sprite = Resources.LoadAll<Sprite>("icons")[25];
            PauseVideo();
        }
        else if (!video.isPlaying)
        {
            playButton.image.sprite = Resources.LoadAll<Sprite>("icons")[24];
            PlayVideo();
        }
    }

    public void FullScreen()
    {
        if (!fullScreen)
        {
            disableButton.SetActive(false);
            fullScreenImage.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(1920, 1920);
            buttons.anchoredPosition = buttonsPos;
            fullScreen = true;
        }
        else
        {
            disableButton.SetActive(true);
            fullScreenImage.gameObject.GetComponent<RectTransform>().sizeDelta = new Vector2(videoWidth, videoHeight);
            buttons.anchoredPosition = buttonsPosCache;
            fullScreen = false;
        }

    }

    public void ChangeVideoLanguage()
    {
        if (!languageChange)
        {
            buttonLanguage.text = "EN";
            videoFileName = videoFileNameDE;
            video.Stop();
            playButton.image.sprite = Resources.LoadAll<Sprite>("icons")[25];
            LoadVideo(videoFileName);
            languageChange = true;
        }
        else
        {
            buttonLanguage.text = "DE";
            videoFileName = videoFileNameEN;
            video.Stop();
            playButton.image.sprite = Resources.LoadAll<Sprite>("icons")[25];
            LoadVideo(videoFileName);
            languageChange = false;

        }
    }

    private void OnGUI()
    {
        GUI.Label(new Rect(10, 10, 100, 20), video.isPrepared.ToString());
    }

}

this part is causing the issue in line 63, for whatever reason…
videoSlider.value = (float)NTime;

it controls my video time slider.
If not commented out, the video wont play, for whatever reason.

NTime, which seems to cause the issue, is:

video.time/ ((ulong)(video.frameCount / video.frameRate)) //video is videoPlayer

[Unity-Artcraft]

No one an idea? I replaced everything with frame related with Length and time but same result.

[Ryiah]

@Unity-Artcraft

first frame pops up in chrome

Are you trying to auto-start the video? While searching for information I came across multiple sources saying that the user has to have clicked on the canvas at least once for it to work.

Video Player, HTML5/WebGL, and the Browser AutoPlay Setting

It seems that browsers, and more specifically Safari, are causing a project we are working on for a client some headaches. We are using the Video Player component to play video on awake but it seems that these videos will not play in our WebGL build unless a user goes into their settings and sets the option to “Allow All Auto-Play” for the hosting site (or for all sites). Is there anything we can do internally to override this setting or are we at the mercy of our users ability to set this up f…

It’s very possible that it’s bugged too. Unity’s WebGL implementation isn’t exactly great.

[Unity-Artcraft]

@Ryiah

Are you trying to auto-start the video? While searching for information I came across multiple sources saying that the user has to have clicked on the canvas at least once for it to work.

https://discussions.unity.com/t/762429

It’s very possible that it’s bugged too. Unity’s WebGL implementation isn’t exactly great.

No it’s not on autostart, you have to click on an ui button to open the video window and then click again on the play button., I somehow got it, somewhat to work by changing:

            if (!video.isPrepared) return;
            videoSlider.value = (float)NTime;

to

            float time = (float)(video.time / video.length);

            if (!video.isPrepared) return;

            videoSlider.value = time;
            video.SetDirectAudioVolume(0, volumeSlider.value);

now I have to get this function to work: when using the slider, the video jumps to the time stamp.

•   public void SeekSlider()
    {
        video.time = (videoSlider.value * Duration);  //(ulong)(video.frameCount / video.frameRate)
    }
  

[Unity-Artcraft]

I tried to Edit my post to add a few things but the edit didn’t worked?! Sorry for double post?!

Things got even weirder now. After changing
video.time = (videoSlider.value * Duration);
in my SeekSlider function to
video.time = videoSlider.value * (float)video.length; ,
everything works but doesn’t work?? The video only works when I switch to a different tab, so I guess it is bugged? … sigh… I really needed that to work.