How to Play a Video on a UI Canvas in Unity Webgl (Simple)

Greetings, today we are here with another Unity tutorial. We shall be looking at how to play a video in a Unity WebGL game/project. This video will be played on a Unity UI Canvas. Unlike with other platforms, we can't simply make a video clip and drag and drop it into a video player component. We have to do a bit more.

Unlike with other tutorials out there, our video files will be included in our WebGL game. We will be using the streaming assets folder to store our mp4 video files.

The Streaming Assets folder in Unity is a special folder that you can use to store files that you want your game or app to access while it's running. These files can be things like images, sounds, videos, or text files.

Unity doesn't touch or modify the files in this folder, so they stay exactly the same as you put them. This is important because it means your game or app can always find and use them, no matter what platform it's running on (like PC, mobile, web browser or console).

Think of the Streaming Assets folder like a storage box for your game that's always with it, so you can easily get to the stuff inside whenever you need it.

We then create a script to load the video from the streaming assets folder and pass it to the video player component.

After that, we create a render texture. We place a raw image onto our canvas. We then lastly add our render texture to our raw image and also to our video player.

That is all that is needed to play a video in a Unity WebGL project on a UI canvas. I also quickly show how to host a webgl game locally to make it easy to test your games.

In this tutorial, your video files are not hosted on another website like Github, Amazon AWS or YouTube. They are contained in your game's streaming assets folder.

Thanks for watching this Unity video on how to play a video on a Unity UI canvas in WebGL.

Subscribe to keep notified when I upload: [ Ссылка ]

How to Play a Video on a UI Canvas in Unity Webgl (Simple)

свернуть