WebGL is not playing Video -- CORS

Our WebGL build is not playing our Video we have attached to a Video Player Game Object through a URL that points to it's location under Assets --> Streaming Assets. We get a CORS issue when we try to run locally in Chrome, Safari, and Firefox. We STILL get the issue when we run our http-server with the --cors flag on Node.js. Any help is much appreciated!!

 

Hey everyone,
I am having problem playing video in Unity WebGL build. I am using Unity 2019.2.
For testing purposes I build an asset bundle from the video clip and put it into the StreamingAssets folder. According to log video is successfully loaded from the bundle but cannot play. I tried latest Chrome and Firefox. Any recommendations or links that could help to solve the problem would be appreciated.

I am receiving the following error in player.errorReceived: "VideoPlayer cannot play clip : [path to the clip location on windows system]."

Partial Source:

var request = loadedBundle.LoadAssetAsync<VideoClip>(videoClipName);
yield return request;
var clip = request.asset as VideoClip;

if (null == clip)
yield break;

player.source = UnityEngine.Video.VideoSource.VideoClip;
player.clip = clip;
player.Prepare();

 

Sorry to hear you are having the same issue! Just a heads up, our team discovered that there is a bug in Unity 2019 that will block videos. However, we are using 2018 and still have the same issue with WebGL.

 

I'm having a similar issue as well, but mine is just an audio clip and I am trying to load using UnityWebRequest. I am however loading it from the streaming assets folder as well. I do get mine to play in a locally ran version of Firefox but not when running it from the web. If I figure mine out, I'll post what I do in hopes that it helps.

 

You cannot play audio or video received from a web request inside Unity WebGL in a practical way. I'd recommend looking at how to do this correctly in pure Javascript first, and then working around that. You will need to understand that a `.play()` call must occur inside an onclick handler.

 

Hi Add a script like this to your object, don't use the VideoPlayer, the script adds one. Type the name of your video file in the Inspector for the script. Make sure your video is in a StreamingAssets folder.
Your WebGL video will show up in Microsoft browsers and Mac Safari with some preference changes. Chrome and Firefox not really working.
using UnityEngine;
using System.IO;
using UnityEngine.Video;
public class video_on_object : MonoBehaviour
{
private UnityEngine.Video.VideoPlayer videoPlayer;
public string videofile;
public GameObject this_object_cam;
void Start()
{
GameObject cam = this.gameObject;
videoPlayer = cam.AddComponent<UnityEngine.Video.VideoPlayer>();
// Obtain the location of the video clip.
videoPlayer.url = Path.Combine(Application.streamingAssetsPath, videofile);
videoPlayer.isLooping = true;
videoPlayer.Play();
}
}

 

Sorry I'm an absolute noob with coding

Which bits of this code need editing with my project specific names?

 

I have used this solution with Unity 2019.4 and it indeed works as promised on Microsoft Edge. Thanks. Although I was wondering if anyone here managed to make it work on mainstream browsers such as Chrome? It is quite incredible to me how complicated this is for such a basic feature. I feel like I'm missing something. Has Unity officially made an announcement/solution about this bug yet?

 

Play a video from Application.streamingAssetsPath work for all browers here...
But i get a black image without streaming. Makes no sense to me. (with and without transcoding)
(Unity 2020.1. 6/7/8)

 

Hi,

I used this code, and attached it to a sphere.
Then I added the video to the StreamingAssets folder.
But it still doesn't work in my WebGL build.
(it became all white like the attached screenshot)

Other info:
Unity build: 2019.4.13
My video has alpha value, and it's a .webm file.

Did I miss anything?

Best regards!

 

I made an asset to play videos on webgl, it works on Safari as well: https://assetstore.unity.com/packages/tools/video/videoplayerwebgl-192420

 

You can use the Moesif CORS browser extension for Chrome to fix this.
Just install it, then enable the CORS option.

Make sure to turn it off again when you're finished, otherwise some of your other websites you browse will have unintended behaviour!