Usage With WebGL

When creating a project for the WebGL platform, there are some specific restrictions and behaviors to be aware of. These are caused by how Unity handles assets in WebGL builds, WebXR limitations, and browser security models. The following points will help you set up your project correctly and avoid common pitfalls.

WebGL Templates

Vour has some WebGL templates in the WebGLTemplates folder. You can select them at Project SettingsPlayer WebGL settingsResolution and Presentation. With these templates, you get an additional button to enable the VR mode.

There are two parameters you can customize:

  • Description: A small description that is shown in link previews to your web app.

  • Show start button (true/false): Specify if a button should appear that needs to be pressed to start the app. This can prevent video loading issues. See Troubleshooting: Videos Not Loading for more details.

Video Locations

When exporting to WebGL, it is important that you use the StreamingAssets or URL option for all video locations instead of local videos. Local videos are not supported for WebGL.

StreamingAssets

Create a folder called StreamingAssets in the Assets folder and move your video files there. When selecting StreamingAssets in the video location, enter the whole video file name (i.e. video1.mp4).

For more information, see: Unity Manual – Streaming Assets

WebXR

WebXR does not work over an unsecured connection (only localhost for testing purposes). Your website must be hosted with HTTPS enabled in order for VR mode to function properly.

Troubleshooting: Videos Not Loading

If your videos don’t play in the WebGL build, the problem is usually one of the following:

Cross-Origin Requests (CORS)

If the video URLs point to a different domain than your Unity app, most browsers will block the request.

Solutions:

  • Serve the videos from the same domain.

  • Ensure that the server hosting the videos returns an Access-Control-Allow-Origin header with each video request.

For more information, see: MDN – CORS

Autoplay Restrictions

Browsers block video autoplay until the user has interacted with the page. In Unity, loading a video in the background at startup also counts as autoplay.

Solutions:

  • Require a user action before the app starts (e.g. Show start button option in WebGL template).

  • Disable Video Preloading in Vour project settings if the first location is not a video location.

For more information, see: MDN – Autoplay Guide

Last updated