WebGL video player issues

Hi all,

I am very new to this all and with a lot of effort & persistence i got my game ready, a small virtual exposition populated with digital artworks made by students in a masterclass 3D.

I got the game working as intended in editor and on windows builds, but i need to get it running on webgl.
I am using Unity 2019.3.0f6 Personal on a windows10 x64 machine.
The game is hosted on the server of the organisation who did the masterclass , as i know pretty much nothing about html/javascript/hosting.., their webmaster is putting it online and we are going back & forth on email.

Here's currently the best working build https://piazza.me/vr
My problems :
- There are multiple video players in the game, but most don't play. Results vary on computers & browsers..
This is the main problem atm.
The only video that seems to work directly is warped as texture around a 3D object. The other 4 videos , being played on a plane object stay blank.
This goes for the hosted version shared above ,as on a firefox webgl build running of my localhost.

This is the error i see in firefox browser console, and it builds up quickly :

Error: WebGL warning: texSubImage2D: Source must not be null.

In chrome i see :

f5c2d259-8b68-45bf-a94e-f819b35a9e67:8 WebGL: INVALID_VALUE: tex(Sub)Image2D: video visible size is empty

[.WebGL-00000200E4BC6230] GL_INVALID_OPERATION: Level of detail outside of range.

with the level of detail quickly repeating itself 100s of times untila too many errors-error displays..

Sadly i got no idea what it means or how to start solving this
I have used URL as source in the video players in my scene, here is an example of the url https://piazza.me/vr/MariaEngelen.mp4

In my editor i have placed the 5 video files used in Assets/StreamingAssets, and in the build there is a StreamingAssets folder which contains these video.

Should the URL's also refer to this StreamingAssets folder on the host , like : https://piazza.me/vr/WebGLBuild/StreamingAssets/MariaEngelen.mp4 ?

- I also get a red "POST" error in chrome console right after Input manager initialize :

main.js?attr=FqmtJw-…mLJKuCc0sxRV6q:1024

POST https://config.uca.cloud.unity3d.com/ 400

xhr.onloadend @ main.js?attr=FqmtJw-…mLJKuCc0sxRV6q:1024

XMLHttpRequest.send (async)

window.XMLHttpRequest.open @ main.js?attr=FqmtJw-…mLJKuCc0sxRV6q:1030

- I have verified with the webmaster that CORS is configured on the server.
Also a .htaccess file is available in all directives with following content

<IfModule mod_mime.c>

  AddEncoding gzip .unityweb

  AddEncoding gzip .wasm

  AddType application/wasm .wasm

</IfModule>

- I tried checking the webassembly streaming checkbox in player settings for webgl but that gave a whole lot of new problems and the game wouldn't get passed the loading screen.

- Currently "Enable Exceptions" is set at None , compression format is Gzip , data caching is check on the rest is off.
Api comp. level .Net Standard 2.0.
Strip engine code - Low.


Can anyone please have a look at my project and get me past these last hurddles, i feel so close to finishing this project but yet so far

 

I have the same problem with playing video on WebGL, do you have a resolution?

 

not yet :-(

 

Bump, same problem !

INVALID_VALUE: tex(Sub)Image2D: video visible size is empty
_JS_Video_UpdateToTexture @ c8f7eb06-3139-4998-9688-e6c712f4c949:8
255[.WebGL-00000196B56F1450] GL_INVALID_OPERATION: Level of detail outside of range.

but works fine in firefox and edge.

 

what version of unity u used ? how you loaded the videos ?

 

https://issuetracker.unity3d.com/is...webgl-builds-when-the-video-is-loaded-via-url

unity version 2019.2.21 did not give the errors above.

 

same error here... The video loaded from StreamingAssets and rendered on a RenderTexture gives me the same Warning on Chrome: [.WebGL-0000018D32FE62A0] GL_INVALID_OPERATION: Level of detail outside of range.

 

Same here!

 

I can get video to play in WegGL on Edge and Firefox but not on chrome. I'm streaming Vimeo video into the game. It's to do with Chrome's spam restrictions for uncolicited content. I wonder is there a way around this at all? Is there a way of even embedding the video into the game that will work on WebGL.

 

Same in 2019.3.5 - anyone found a workaround/solution for this yet?

 

Ah. It's a known bug, Unity broke it, and has been trying/failing to fix it for 6 months now...

https://issuetracker.unity3d.com/is...webgl-builds-when-the-video-is-loaded-via-url

 

I'm looking for this RE-fix too, keeping me from releasing a project.
I've tried all beta and alpha 2020 versions so far.

 

We have a build in 2019.3.8f1, and it seems to work for some and not for others. Similar to some others, the video file still shows as being downloaded in the console, but it does not show. This leads me to believe PixelRogue could be on to something with Chrome settings/restrictions (we also verified that we were using the same versions of Chrome). Also tested on Edge and Firefox, for me it did not work on Edge, but did on Firefox.

 

It is not just iOS, it is on MacOS Catalina as well. It endlessly loads the video until an error is thrown.
This bug occurs using Unity 2020.1.11.
Not a 100% sure this is related to autoplay though.

"Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission."

When we click on a UI Button we instantiate another UI GameObject containing a Video Player component. We pass a URL to the video player and call Prepare. Upon preparation is complete we call Play. Play on Awake is false and Audio output is set to Direct.
It is infinitely preparing and eventually fails to do so showing the above error.

For firefox (82.0.2) the video playback stutters, but I've seen you have an open bug report at mozilla to handle that case.

Chrome & Edge are playing normally.

Would be nice if we could finally play video in all major browsers without bugs.

 

@MaskedMouse

Please try this page.
Loading does not start when the page is accessed.
First click the start button at the bottom left to start loading.

TestPage

 

Yeah that works. Is it working because you click the button to load the unity instance?
On our website, we click on a button which redirects to our webgl build page which loads the unity instance automatically.

 

I modified index.html, and when I clicked it, I played a short silent sound and loaded Unity.

 

So am I correct in saying that WebGL, video playback and iOS and Safari in general on recent macOSes is just not working and/or very poor user experience? Reason I'm asking is I'm about to start a proof-of-concept for a client and they want 360 video interactions with 3D elements that runs cross-platform on desktop and devices within browsers.

From my reading/research current state of play with Unity's WebGL is it isn't reliable or performant enough when using videos. Or is there a version of Unity I should use that is?

Cheers.

 

From our recent weeks of experience with Unitys current state of webGL, i would completely agree to that statement.
As soon as mobile on iOS devices comes into the mix...i would strongly advise against using Unity WebGL...
There is a very high chance your stuff will not work...because it either floods the RAM just by using Audio-Files in your project or it will cause any other hickups...
It's unfortunate and no blame towards anyone specific at Unity...it's just what it is. WebGL in general does not seem a high priority...neither for Unity, nor for Apple (i get Apple's point...if webGL would work great, why use native OS apps then? How to keep people locked in on your eco-system...)

 

Hi friends!
Is there currently any way to play videos on Unity 2020 WebGL?
Maybe a HTML5 video hack?

 

Any update on these? Still having issues with video playback on MacOS Big Sur using Safari 14.0.3, autoplaying Muted videos play fine but if the user tries to unmute them, the video playback pauses, then when the user tries to unpause or play the video again from the onclick event of a UI button they have clicked, Safari throws this tantrum (I have commented out the url as it is confidential):

Code (CSharp):

1. An error occurred running the Unity content on this page. See your browser JavaScript console for more info. The error was:
2. NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
3. play@[native code]
4. _JS_Video_Play@ /// URL COMMENTED OUT ///.framework.js:2:53188
5. wasm-stub@[wasm code]

Works fine on Opera, Chrome, Edge, Firefox this issue is just on Safari because Safari is ass but we also need this to work ideally. Unity is all about 'enabling developers to succeed' so can we please 'succeed' at playing videos on webgl?

 

I created a new project with the versione
2019.3.15f1

Just a video with a script:

Code (CSharp):

1.   void Start()
2.     {
3.         StartCoroutine(ExampleCoroutine());
4.     }
5.  
6.     // Update is called once per frame
7.     void Update()
8.     {
9.        
10.     }
11.  
12.     IEnumerator ExampleCoroutine()
13.     {
14.         Debug.Log("Started Coroutine at timestamp : " + Time.time);
15.  
16.         //yield on a new YieldInstruction that waits for 5 seconds.
17.         yield return new WaitForSeconds(1);
18.  
19.         //After we have waited 5 seconds print the time again.
20.         Debug.Log("Finished Coroutine at timestamp : " + Time.time);
21.         vp.Play();
22.     }

The video not start at all.

Any solution?

 

you are able to start the video? how? with what version of unity?

To me it not start at all

 

I made an asset to play videos on webgl, it works on Safari as well.

 

Thanks, Seems cool!
Can you share a demo online with webgl and a field to insert a video Url, to let me try it on my safary browser?