How to Play a Video in Unity WebGL (Simple)

How to Play a Video 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. 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 and a video material. We place the object where we want out video displayed and attatch the render texture to the video player component. We also attatch the render texture to the video material.
That is all that is needed to play a video in a Unity WebGL project. 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 KZbin. They are contained in your game's streaming assets folder.
Thanks for watching this Unity video on how to play a video in WebGL.
Subscribe to keep notified when I upload: tinyurl.com/Su...
How to Play a Video in Unity WebGL (Simple)

[@milkandcookies9536]

this is the only video that works on KZbin! all the others rush through it, do some webhosting that requires additional setup. your tutorial is the only one that just works out of the box. Thanks, you have my eternal gratitude

[@philipino99]

this worked!!!! oh my!!! unity dont make it clear how to do this. no one has made a clear guide where we can just play the video file from our project. i contemplated spending £150 for that plugin but then I find your video. you saved me so much money, thanks so much for making this free

[@kfcispoison6713]

hold on. there is a unity plugin going for $150 for playing a video in webgl and my man just uploads how to do it for free and quickly. underated youtuber

[@rayamc607]

Excep this doesn't work on Safari or mobile :-(

[@kfcispoison6713]

it worked fine on my android and my ipad...

[@rayamc607]

For me it depends on the browser. No good on Safari mac, or chrome on Android. Slow and jumpy on samsung browser. Fine on other desktop browser but it has to work on everything@@kfcispoison6713

[@XxXGAMESTERxKCXxX]

I appreciate the video, It saves me ever having to buy an asset that costs hundreds of pounds when it only took a few lines of code. Thank You!

[@kristaferaltergott]

Well done Max, thanks so much!

[@abobaaboba5902]

Bro, please tell me what to do if I did everything like in your video, but I have a problem. when I click start the game, the video is not displayed, although it is inside the camera, but the video is displayed in the unity editor, what should I do bro??? unity version 2022 and project 2d

[@kamo5543]

excellent, works perfect, thanks!, by the way, in my case works in my unity 2022 version, in 2019 it wasn't .

[@maxodidily]

Out of curiosity, which version of 2019 didn't it work in? I discovered how to do this in 2019.4.33f1 but haven't tried any earlier versions.

[@zoggieUtube]

I get this error when trying to access the video player from my phone. NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. Everything works fine when viewing from my pc. any idea why i'm getting this error?

[@user-mp8ll3cw6e]

It's perfect solution

[@ponysonic]

whats the reason for the streaming assets folder and code snippet vs just using the render texture/vid player method with it set to play on awake?

[@colecancode]

that doesn't work on webgl

[@lkc101]

It works on PCs but not on mobile.... any ideas? It'd be crucial for it to work on mobile WebGL....

[@IsmoYliviiri]

Colors changing little bit from video when adding to Unity, otherwise works even in mobile phone build. Just have to remember to add video to be mp4 not mvk or other video files, atleast form me in mvk not work with this.

[@vanessacmonteiro]

Thanks for the great video! Do you have any showing how to add video to webGL that can be published? Or any tips on that? My video is hosted on AWS, but I can't find a way to make it work after publishing the game...

[@maxodidily]

What do you mean by doesn't work when published?

[@nadiamarzuki4922]

Hey, im getting VideoPlayer does not contain definition of 'url'. :( following exactly as ur script. using 2022.3.10f1

[@maxodidily]

2 things jump to mind. Firstly, the VidPlayer script we make, don't call it VideoPlayer. Secondly make sure you import UnityEngine.Video;

[@nadiamarzuki4922]

@@maxodidily hi thanks! damn missed that. im dumb :p. thanks alot about to try it out. you're a lifesaver.

[@Rama142694]

hey max! Nice video. i have a spritesheet map animation but its to heavy because the resolution is too high. I try to low the resolution but the spritesheet is still really heavy. I was thinking in render a video and use that instead with this approach you show. Do you think is a good idea or do you know a better way to do ir?

[@maxodidily]

I think the video idea is worth trying. About a year ago I faced a similar issue. Hundreds of megabytes for a png sequence or 6mb for an MP4 video.

[@Rama142694]

@@maxodidily okay thank you very much! Will try with this video

[@kprogram8870]

The video you presented is to do it with a video that has already been prepared, and what I want is to print a video that shares the real-time screen on the UI. Is there a way?

[@kevienthursday1863]

我有同样的困惑，目前我把网页部署在服务器上，但因为带宽限制，下载速度较慢，这就导致播放视频总是卡顿。卡顿可以理解，但是缓冲一段后，播放就像快进>>一样。暂时还没有找到解决办法。

[@zennycool]

after a lot of troubleshooting and it not working in the build. REMEMBER: make a clean build or it won't work!

[@user-jr7pj8or5y]

When I try to test webgl local, I only get video's sound without picture, I dont know why😭😭😭

[@user-jr7pj8or5y]

I have solved this problem. Turn out the code format of the video is mp4v, so I is black screen. Using ffmpeg to change the code format to H264 would fix the problem. 😄

[@maxodidily]

Sorry for the slow response! Glad to hear you solved the problem! docs.unity.cn/2023.2/Documentation/Manual/webgl-video.html This link is from Unity and provides more details on what formats are compatible with WebGL.

[@kevienthursday1863]

目前我把网页部署在服务器上，但因为带宽限制，下载速度较慢，这就导致播放视频总是卡顿。卡顿可以理解，但是缓冲一段后，播放就像快进>>一样播放这段缓冲的视频，然后又卡顿。暂时还没有找到解决办法。

[@user-qk6or9vx9h]

would you create a new for 2D game ? will this thing work in a 2D game developed in Unity

[@maxodidily]

This can work in 2D games. Here is a tutorial on how to play a video on a UI canvas kzbin.info/www/bejne/o3quaniZrNx4g7s (Almost identical to what you do in this tutorial).

[@Keolamation]

my video comes out black but, I can here audio. jfc

[@kprogram8870]

I'm sharing a screen on the web and I want to print this out on Unity 2D UI. Please teach me the way.

[@maxodidily]

I have a tutorial on how to play a video on a UI canvas in Unity WebGL too: kzbin.info/www/bejne/o3quaniZrNx4g7s It's very similar to this but we use a raw image to display the video.

[@kprogram8870]

@@maxodidily The video you presented is to do it with a video that has already been prepared, and what I want is to print a video that shares the real-time screen on the UI. Is there a way?

[@luiginicastro1101]

Odd I get this error : "VideoPlayer cannot play url : C:/Users/Colt/Documents/GitHub/TheContemporaryHub/TheContemporaryHub/Assets/StreamingAssets" but when I check the debug it does call the video location properly. Any ideas?

[@maxodidily]

That is odd. In your video player script, what have you done for the videoPath string? And what value are you assigning to the videoFileName string?

[@luiginicastro1101]

@@maxodidily I did it the same as the video but funny enough it still works even with the error popping up

[@maxodidily]

That's even stranger. Is this an error you get in Unity or a web browser?

[@luiginicastro1101]

In Unity but after an Editor reset it is gone. Putting it in the unexplained mystery bin @@maxodidily

[@maxodidily]

Mysteries like that are one of the joys of Unity.

[@abobaaboba5902]

Bro, please tell me what to do if I did everything like in your video, but I have a problem. when I click start the game, the video is not displayed, although it is inside the camera, but the video is displayed in the unity editor, what should I do bro??? version unity 2022 and 2d project