Adding Video to Unity WebGL
How do I get video to work for Unity WebGL?
This is one of my number one questions and I finally have a tutorial for it. These instructions should help you whether you're building your game for SIMMER.io or if you're doing self hosting.
You can see the results of this tutorial here: https://simmer.io/@TheRoccoB/webgl-video-demo (click the screen to start the video).
Key Concepts
There are a few key things to getting this to work that differ from regular video playback.
- You need to play video via a URL. MP4 format seemed to work well for me.
- The server that hosts the video must be CORS enabled.
- The video must play on a user action (ie click or keypress). Otherwise most modern browsers will block it.
If that all sounds confusing, it's not too bad. For items 1-2, we can use free hosting with Github pages which is CORS enabled by default.
For item 3, we just need to make sure we play on a keypress rather than awake. Browsers now block auto video playback to prevent annoying sites from playing ads automatically. We use a script to trigger the Video playback.
I proved this out in Unity 2020.3.20f1, but you can probably do it in most modern Unity versions.
Step by step
I may make a video someday, but for now there's already a pretty solid one on Youtube to achieve this.
Follow this video tutorial, but you can skip the segment between 2:28 and 3:08 where the video author puts a video on his local webserver. At 3:10 where he or she pastes in the url from his local server, you can use https://theroccob.github.io/video/video.mp4 to prove this out. You can also skip the section after 4:50 where he places his Unity WebGL build in a folder on his local web server.
I'll explain how to host and use your own video with Github pages below.
Some Code
To save you a little typing, here is the VideoController code from the video:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Video;
public class VideoController : MonoBehaviour
{
public string url;
public VideoPlayer vidplayer;
// Start is called before the first frame update
void Start()
{
vidplayer = GetComponent<VideoPlayer>();
vidplayer.url = url;
}
// Update is called once per frame
void Update()
{
if (Input.anyKey)
{
Play();
}
}
void Play()
{
vidplayer.Play();
vidplayer.isLooping = true;
}
}
Hosting your own video with Github pages.
You can use your own web server via a hosting service if you have one, but a key is that your video file must be CORS enabled. Sometimes that is tricky to set up, so I'd recommend just using Github pages, which is properly configured out of the box. Also, it's free.
Sign up for Github if you're not already signed up.
Create a new repository:
Give it a name:
Leave all the other fields as is and "Create Repository".
Click "uploading an existing file".
If you already have an MP4 ready you can use that, or you can use one of the ones on this site: https://www.learningcontainer.com/mp4-sample-video-files-download/. Try to give it a simple name like "video.mp4".
Commit changes:
Go to settings:
Pages:
Set your branch to "main" and save
Your URL will be: https://<github_username>/<repository_name>/<video_name>.mp4
For this example, my URL is https://theroccob.github.io/myvideo/video.mp4.
Be patient, it takes a few minutes for Github to set up your repo for pages. So if you see a 404 error page, just wait and try again in a few minutes.
Now continue on with the video starting at around 3:10 when they paste in the mp4 URL.
Testing it out and Uploading
When you click "play" in Unity and click the playfield (or press any key), the video should start playing.
Next, you'll want to File => Build and Run setting WebGL as your target platform. With any luck you should see the same keypress-to-play-video behavior that you saw in Unity. You can use my video tutorial here if you don't know how to do this.
You can upload your project for free at simmer.io/upload. It's a pretty simple drag and drop process.
Troubleshooting
Remember that things must work at each step of the way. If your video does not play from the Unity play button, it definitely won't work when you export to WebGL. If your WebGL build doesn't work from "Build and Run", it also won't work when uploaded to a website like SIMMER.
If things aren't working from the browser, your best bet is to bring up the javascript console for more info.
If you see an error about not being allowed to autoplay the video, you might have forgotten to uncheck "play on awake" in the Video Player settings.
That's all for now
I hope to make a full video demo of how to do this, but for now you'll have to make due with this old school article!
Again here are the results of this tutorial.
If you like SIMMER.io, check out our premium hosting product for Unity developers: https://simmerconnect.com