Videoplayer WebGL (URL) Not working

Hi,

@Schubkraft and @LeonhardP
I was checking out theses thread here :
https://forum.unity3d.com/threads/unity-5-6-0b4-issues-with-video-player-in-webgl.452092/
&
https://forum.unity3d.com/threads/new-video-player-does-not-work-with-webgl.451777/

And noticed that video files were not supported when exporting to WebGL... So i redesigned my game to work with URL now instead... i have my video files uploaded to an https server... I put the url in the url... and it works perfectly in game... (takes less than 1 sec to start and its totally acceptable)... It also works fine when exporting in exe for windows...

However, when making a webgl build... the game works... but none of the 4 videos works... one is about 20mb mp4... all others are small 2mb clips... everything else works (no error, no bug)... only the video player is not working...

Yesterday when doing a test on "itch.io", i went into the console of my browser and copied the following... Honestly, i understand nothing of that... but it might help someone out
Also note that i tested on Chrome, then firefox then IE... all same issue...
Finally, I only got the following error ONCE... I have been trying anything i could think of for the last 24h and have not gotten that bug since... Video still dont play at all... i can "skip" the not playing video, but nothing is shown (or heard)...

Spoiler: Click to Open Wall of text from console

An error occured running the Unity content on this page. See your browser JavaScript console for more info. The error was:Uncaught abort(106) at Error at jsStackTrace (UT135.asm.framework.unityweb:2:27465) at stackTrace (UT135.asm.framework.unityweb:2:27636) at abort (UT135.asm.framework.unityweb:4:34824) at GMt [Array.GMt] (UT135.asm.code.unityweb:32:574739) at cWa [Array.cWa] (UT135.asm.code.unityweb:14:698252) at _yf [Array._yf] (UT135.asm.code.unityweb:9:20546) at _Gt (UT135.asm.code.unityweb:32:547572) at dynCall [Object.dynCall] (UT135.asm.framework.unityweb:2:15292) at HTMLVideoElement.videoInstances.(anonymous function).onerror (blob:https://v6p9d9t4.ssl.hwcdn.net/7015d49d-2e29-4a67-8ab8-992e0a91803e:2:312416)If this abort() is unexpected, build with -s ASSERTIONS=1 which can give more information.


Invoking error handler due to
Uncaught abort(106) at Error
at jsStackTrace (UT135.asm.framework.unityweb:2:27465)
at stackTrace (UT135.asm.framework.unityweb:2:27636)
at abort (UT135.asm.framework.unityweb:4:34824)
at GMt [Array.GMt] (UT135.asm.code.unityweb:32:574739)
at cWa [Array.cWa] (UT135.asm.code.unityweb:14:698252)
at _yf [Array._yf] (UT135.asm.code.unityweb:9:20546)
at _Gt (UT135.asm.code.unityweb:32:547572)
at dynCall [Object.dynCall] (UT135.asm.framework.unityweb:2:15292)
at HTMLVideoElement.videoInstances.(anonymous function).onerror (blob:https://v6p9d9t4.ssl.hwcdn.net/7015d49d-2e29-4a67-8ab8-992e0a91803e:2:312416)
If this abort() is unexpected, build with -s ASSERTIONS=1 which can give more information.
blob:https://v6p9d9t4.ssl.hwcdn.net/7015d49d-2e29-4a67-8ab8-992e0a91803e:4 Uncaught abort(106) at Error
at jsStackTrace (blob:https://v6p9d9t4.ssl.hwcdn.net/7015d49d-2e29-4a67-8ab8-992e0a91803e:2:27465)
at stackTrace (blob:https://v6p9d9t4.ssl.hwcdn.net/7015d49d-2e29-4a67-8ab8-992e0a91803e:2:27636)
at abort (blob:https://v6p9d9t4.ssl.hwcdn.net/7015d49d-2e29-4a67-8ab8-992e0a91803e:4:34824)
at Array.GMt (blob:https://v6p9d9t4.ssl.hwcdn.net/b33c5b63-7466-4f41-95c5-cfa7ea540d6c:32:574739)
at Array.cWa (blob:https://v6p9d9t4.ssl.hwcdn.net/b33c5b63-7466-4f41-95c5-cfa7ea540d6c:14:698252)
at Array._yf (blob:https://v6p9d9t4.ssl.hwcdn.net/b33c5b63-7466-4f41-95c5-cfa7ea540d6c:9:20546)
at _Gt (blob:https://v6p9d9t4.ssl.hwcdn.net/b33c5b63-7466-4f41-95c5-cfa7ea540d6c:32:547572)
at Object.dynCall (blob:https://v6p9d9t4.ssl.hwcdn.net/7015d49d-2e29-4a67-8ab8-992e0a91803e:2:15292)
at HTMLVideoElement.videoInstances.(anonymous function).onerror (blob:https://v6p9d9t4.ssl.hwcdn.net/7015d49d-2e29-4a67-8ab8-992e0a91803e:2:312416)
If this abort() is unexpected, build with -s ASSERTIONS=1 which can give more information.

Edit : for anyone thinking the problem "might" be with my video... or the server hosting the video... they are all working in the engine as well as with a windows build (using url's)... and i just tried doing an embed of the video themselves on my blogger blogspot webpage and it works as well...

Edit 2 : I was told to add this by a friend who is a programmer :
"Uncaught (in promise) DOMException: The element has no supported sources."
along with this image :
https://scontent.fymy1-1.fna.fbcdn....=fa1cd758ef1c0703cf836f6650f41518&oe=58FC00DE

Thank you for your time and have a nice day!!

 

Could be CORS problem? Maybe you are playing a video from a different site that the security wont allow access to unless you add some kind of crossdomain.xml file to the server's folder to tell it you are ok with getting files from that server? Something like that, cant remember exactly. Just trying to help

 

Thanks for trying! Do you think it could be itch.io that prevents a game from connecting to another server to leach the videos? OR that the "000webhost" server i picked to host my mp4 file refuses to share?

Although as I've written, I really doubt it would be the 000webhost since the game works fine without changing anything and using those same direct url while in the engine and in a windows exe build, and the video files themselves play fine when hotlinking and embeded in another blogger page.

 

I think you cant access another website other than the one the unity app is hosted from (like with WWW), it will be blocked. you have to use some other way.

 

Just ran into this as well. The video player seems to swallow the error, so you don't see in the console that it's just a CORS error. That was the issue for me though. After hosting the video on a CORS enabled server it streamed fine on a webgl build. I'm sure future Unity builds will output the error to the console.

 

Yes you are absolutely right (as was Schubkraft answer before), I added a ".htaccess" file in the folder where the video were hosted and everything started working after that

 

Hey I'm having a similiar issue of trying to get a video to play in WebGL. Do you think you could share how you did your .htaccess file with me cause I'm really unsure of how to make one?

 

sure, here is the content of my .htaccess file... dont ask me to explain it i simply copy pasted it from elsewhere and it worked

-------------------------
<FilesMatch "\.(php)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
-----------------------------

be warned though that you need to actually upload a file to the server and rename it ON the server itself... windows doesnt want a file whose name starts with a dot... so you can create a txt file named x.htaccess, upload it to your server, then remove the x by renaming the file after it has been uploaded...

 

Thanks for the reply and warning. I'll see if i can figure it out.

 

Hello guys, i'm stuck here, everything works but the video wont play on WebGL, but the audio of the video, that wasnt supose to play, works.

I have everthing setup correctly, working fine on standalone and even on editor through the server. Only WebGL isnt working.

Currently using 2017.3...

[EDIT]
Solved, aparently the problem was with the video itself, someway the browser wasnt able to play some container or specific size. I Need to discover more about this, if a discover what really was the problem, I post here.

Thz to this tread, was very helpful

 

This worked for me, thanks guys. I placed the htaccess next to the video on the server to test

 

I got a demo to work with a free script from the unity store
See
https://www.videoplusprint.com/test/videoCardGL/

 

Do you mind to share which script?
Anyone has a suggestion on how to play video in WebGL build for Unity 2017/18 without buying a $50 or more asset?

 

Hi Brian, this is exactly what I need to do. Any chance you share the scripts with us? Thanks.

 

Could you please share the name of the script!

Anyone else has an idea of an asset that can fix the problem?

 

Hello.

Did you find a solution for this?
My first video plays but the rest not :/

 

First sorry for my english. I go post my solution:

In editor create a folder with the name StreamingAssets and put your video file into then (the video format I uses is .mp4);

script:
Create a VideoPlayer component and assign in a plan case needs video in scene or camera if you need video full screen;
Use this command to combine the streaming assets path with the video file name and extension:
videoPlayer.url = System.IO.Path.Combine (Application.streamingAssetsPath,"myFile.mp4");

and, call play mode:
videoPlayer.Play();

works fine to me with mp4 and MOV videos! Unity 5.6.5

Thanks for all answers! Helps a lot!

 

First sorry for my english. I go post my solution:

In editor create a folder with the name StreamingAssets and put your video file into then (the video format I uses is .mp4);

script:
Create a VideoPlayer component and assign in a plan case needs video in scene or camera if you need video full screen;
Use this command to combine the streaming assets path with the video file name and extension:
videoPlayer.url = System.IO.Path.Combine (Application.streamingAssetsPath,"myFile.mp4");

and, call play mode:
videoPlayer.Play();

works fine to me with mp4 and MOV videos! Unity 5.6.5

Thanks for all answers! Helps a lot!

 

Thank you for your reply. This did not fix our problem. Our first video play and as soon as you click to go to next video, it does not load and it is just black scree :/

 

Hi, try to remove de videoPlayer component add a new one and reload de play function. I have more than 1 video and works to me.

 

Im sorry, I am trying to follow all of this. for those of us who dont know about or have servers.

https://cdn-b-east.streamable.com/v...ken=CttEr7drfKOjaBbxLRTnOg&expires=1547356834

this is my url to my video. is there a way to make this video work from streamable in the unity webgl build. or do you have some reference to this in the unity docs or just something to help me a little further.

thanks

 

or do you know of a different host that would work. I am using itch.io

 

Hi,
I have problem with use VideoPlayer to play video .mp4 on iOS device
I check video file by Handheld.PlayFullScreenMovie("file://" + path); -> it play ok
then, I check with code:

Code (CSharp):

1. videoPlayer.renderMode = VideoRenderMode.APIOnly;
2.         videoPlayer.playOnAwake = false;
3.         videoPlayer.isLooping = false;
4.         microphoneSource.playOnAwake = false;
5.  
6.         videoPlayer.source = VideoSource.Url;
7.         videoPlayer.url = path;
8.         videoPlayer.audioOutputMode = VideoAudioOutputMode.AudioSource;
9.         videoPlayer.controlledAudioTrackCount = 1;
10.         videoPlayer.EnableAudioTrack(0, true);
11.         videoPlayer.SetTargetAudioSource(0, microphoneSource);
12.  
13.         videoPlayer.prepareCompleted += PrepareCompleted;
14.         videoPlayer.loopPointReached += EndReached;
15.         videoPlayer.errorReceived += videoerr;
16.  
17.         videoPlayer.Prepare();

and getting error: VideoPlayer cannot play url: [path]

I use Unity ver 2018.2.0f2
thank for any help!

 

My video file is on local, not download, in folder Application.persistentDataPath
and I have try mode "videoPlayer.source = VideoSource.VideoClip", it working ok on editor too, but on iOS device it not, and no log error
thank for response!

 

lol look i have cure for cancer and it works

 

I know this is old. But, I still had the same issue so someone else might find this solution helpful:

I used AWS to host it, followed their tutorial on activating AWS as CORS configuration and hosting a video. But, now I'm streaming from URL via webgl upload to itch.io.

I hope this helps someone else. So much relief. Took 5 minutes to implement the solution!

 

Hi, I followed you instructions and used AWS. I created a bucket and tried pulling from there. I'm not sure whether you are just using the url or you actually using AWS sumerian. It still didn't work when I tried to pull from the bucket. What version of unity are you using? Could you maybe post some code on what you did to make it play on WebGL.

Thanks.

 

He's posted to all the threads, with all the bugs in WebGL video, and saying "it's CORS" when ... in most cases ... it isn't.

He's saying "I have the solution" when he does not.

 

So looking at this for a while I have come across a way to play a video in WebGL. Know that this is not a solution but a way to play a video in WebGL.

Requirements:
Unity Version- Unity 2018.4.13f1

At first it was not working for me but I noticed I put the video in a start function to play. I then rather put the Play(); in an update then it started working trying to play the video all the time.

So there are some settings I changed to make this work. This was just me trying out everything. I don't know how it works like this but maybe someone else can explain.
(This does use the StreamingAssets folder)





So the script basically runs and tries to play the video and when it does it will stop going through the script to run the Play() method.
Here is a example of game object that plays to Camera Far Plane:


So All I know is if you want to play a video in WebGL on this unity version, you can't play it immediately otherwise it will just go past the Start or Awake method. Otherwise playing it on click late when the game is loaded should work normally.

Here is an example where I used camera far plane and Plane object to play a video.
https://simmer.io/@mjamie/webglvideotest (Sorry about video sound overlapping, Just showing it works)

I wish that the problem would be solved in later versions but I can't seem to find anyway to make it work. If you can't seem to make this work just PM and I'll check if I maybe missed some settings that I forgot to show.

If you would like the project files just ask and I'll upload it to Git.

Hope this is some help.

 

Hello, I tried following your instructions but I was still receiving error codes. My video player was unable to play my video clip properly. The sound is working but for some reason it's not showing the video?

Error Message: UnityEngine.Video.VideoPlayer:set_url(String)

Also, really new working with Unity so all help is greatly appreciated!!

 

Sorry for the late reply...

Is this error in the editor or build?

 

Thanks, it works on localhost. Finally!! But it still doesn't work on browser. I tried on Chrome and Opera. It's black screen again

 

Check if you WebGl Extension is enabled on Chrome. Must be changed in flags here: chrome://flags/

Also check that in Chrome settings in 'advanced' under "System" that
"Use hardware acceleration when available" is ticked/on.

Is the sound playing from the video at all or is there just a black screen?

 

Edit: Downgrading to Unity 2019.2.21 did the trick for me.

 

What was the free script? Because your card works for me when most video won't.

 

The recent Unity 2019.4 LTS now support WebGL videos. If you haven't tried my suggestion try it out. If you have I can try help you with it.

Check it here.

 

Can you please post where this plugin and script are? You say you have a fix but only show an example and don't give us any useful links.

 

GREAT HELP, thanks! I managed to copy what you've done and get my video playing in webGL. The only issue is, now, it's playing on loop.

I have zero coding experience but tried the following code to stop it, but didn't seem to work. Can anyone help amend this code so that the video only plays once through:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Video;
public class playVideoConsole : MonoBehaviour
{
bool canUseConsole = false;
public VideoPlayer videoPlay;
public string videoClipName;
private string url;
private void Awake() {
url = System.IO.Path.Combine(Application.streamingAssetsPath, videoClipName);
videoPlay.url = url;
}
private void Update() {
if (!videoPlay.isPlaying) {
videoPlay.Play();
videoPlay.isLooping = false;
} else if (videoPlay.isPlaying) {
videoPlay.isLooping = false;
return;
}
}
}

***EDIT***

I tried removing the update function and include "videoPlay.isLooping = false;" and "videoPlay.Play();" into the Awake function, which looked to work, however in the webGL build the video didn't play correctly. Any help here would be appreciated.

 

I too have had some luck using the same script as @SeanWebber. My videos now play in the browser, but they loop, where I'd like them to only play once.

 

What format are these video files in? Would it be possible to play a video with transparency?

 

I've been using .mp4 files, encoded as h.264.
H.264 files do not store an alpha channel, so they won't contain any of their own transparency, but you can set the alpha of the video player to be partially transparent.

 

I figured out transparent videos. You need to use .Webm
Grab this video, or use it as a URL
https://simpl.info/videoalpha/video/dancer1.webm
if you downloaded it, then put it in your "Streaming Assets" and do the above steps
eg URL = Path.Combine(Application.streamingAssetsPath, FileName);

if you use webm it needs to be in vp8 encoding (unity does not support vp9 at present)
I had an apple pro res .mov with alpha and I converted it using FFmpeg
"ffmpeg -i TestVideo.mov -c:v libvpx -pix_fmt yuva420p -metadata:s:v:0 alpha_mode="1" -auto-alt-ref 0 -codec:a libvorbis -qscale:a 5 output.webm"

The attached image is playing 3 different videos on simmer.io as a webgl build

 

Ok I see what you were doing wrong here. Basically you were manually looping your video with whats going on in your update function. What you needed to do was try to play the video and once it starts then stop trying to play it. I modified the code, this works for me

Code (CSharp):

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4. using UnityEngine.Video;
5.  
6. public class playVideoConsole : MonoBehaviour
7. {
8.     bool canUseConsole = false;
9.     public VideoPlayer videoPlay;
10.     public string videoClipName;
11.  
12.     private string url;
13.  
14.     private void Awake() {
15.         url = System.IO.Path.Combine(Application.streamingAssetsPath, videoClipName);
16.         videoPlay.url = url;
17.          StartCoroutine(TryPlayVideo());
18.     }
19.  
20.     private IEnumerator TryPlayVideo()
21.     {
22.         Debug.Log("Trying to play video");
23.         while (!videoPlay.isPlaying)
24.         {
25.             videoPlay.Play();
26.             yield return new WaitForEndOfFrame();
27.         }
28.  
29.         Debug.Log("Video is playing: " + videoPlay.isPlaying);
30.     }
31.  
32.     // Update is called once per frame
33.     private void Update()
34.     {
35.  
36.     }
37. }

You can actually just remove the update function if you want

 

I simplified my script to play video once. Add this to Video Player gameObject and put your h264 files in StreamingAssets folder.


using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Video;

public class BloodyVideo : MonoBehaviour

{
bool canUseConsole = false;
public VideoPlayer videoPlay;
public string videoClipName;
private string url;
private void Awake()
{
url = System.IO.Path.Combine(Application.streamingAssetsPath, videoClipName);
videoPlay.url = url;
}
private void Start()
{

videoPlay.Play();
videoPlay.isLooping = false;

}
}

 

So the loop was there so that it can definitely play. I have noticed when putting the Play() function in Awake or Start it would not work sometimes. Here is a script to make it play once by basically creating a bool. I'll upload that file and you can test it out.

 

Can anyone get this working on the Android version of Chrome? I can get it working on the desktop version (WebGL video playing), but just get a black screen on Android. Mobile WebGL video playback is what I need.

 

@jsleek see my above post with the webm format