Question Unity WebGL Video Player doesn't play on IOS mobile

Hi, I recently had to make a multi platforme web player, the problem that I encounter is that there is no way to make it work on IOS mobile, the video player just don't want to play the video, it stay on a black screen but the audio is working fine (I manage the audio and the video separately) so I wonder if there is any restriction or requirement that is not mention on the IOS documentation to allow a video to play.
I've try many thing to make it work like disabling the auto replay and the play on awake function, I also try to only play the video when the user clic or press on a button but it still doesn't work when it work fine on every other platform.
If somewhone have information or a way to make it work I would appreciate the help.

 

Hi,

There is problem for videoplayer with WebGL platform. This is bug and Unity working on this and resolved for versions as issue mentioned in below link,
https://issuetracker.unity3d.com/is...webgl-builds-when-the-video-is-loaded-via-url

I have checked in 2019.3.15f1 (recommended in issue list solution) , 2019.4.2f1 (LTS), 2019.3.0f6. But it’s not working.

Kindly let if you get any work around, me too searching same issue solution.

Thanks,
Virat

 

URL video stream is still not working on ios 13 webgl for me even in 2020.2.0a18. (could be an IOS issues??)
Videos stream plays in firefox chrome, (chrome android) safari edge browsers.
For older version of unity I copied over the "video.js" from 2020.2.0a18 to currently used 2014.4.4f1
ProgramFiles\Unity\Hub\Editor\2019.4.4f1\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\lib
I added on line 11 after video.src = str;
video.preload = 'auto';
video.autoload = true;
This got rid of the "WebGL: INVALID_VALUE: tex(Sub)Image2D" error for me. not a full solution but a start
Edit: If the video is in streaming assets folder it works on webgl IOS but the front end download is increased and not practical with a lot of videos.

 

Hi PeteS,

So I try to add the line you were suggesting but still do nothing on my side, I also try to do this solution that was also propose on the ticket but without succes (also try to combine both of them but doesn't work too).

For the test purpose I've tryed to play a video with the Video Player Render mode set with three option " Material override ", " API ONLY " and "Camera Near/Far Plan " who just work perfectly fine on every platform except on the WebGL IOS.

I've try all this solution on Unity 2019.4.3f1 and 2019.3.15.f1, that maybe explain why it doesn't work on my side since you are using 4.4f1 I'm going to try with your version this afternoon and hope that it would work (I will update the post with the results this evening)

But by any chance can you tell me more about what you use to make it work to see if I can reproduce the "fix" ?

Update : After some try didn't work ether on 2019.4.4f1 on my side

 

The video rendering in WebGL build issue resolved at my end. This work in Unity 2019.4 LTS versions.
Note:- I have observed that mp4 video file rendered in WebGL build (not wmv). If any have other types of file format status please update here.

 

Did anyone ever managed to make video player work on ios webgl? Because I cannot seem to find a way to do it. Please let me know if there is a way, I've tried most of the things posted around the forums.

 

The only way I was able to play the unity webgl video on an iPhone was using this browser: https://apps.apple.com/us/app/webxr-viewer/id1295998056 although I know this does not fix the real problem.

 

Having the same issue regarding the media player not working on Webgl build playing on iPad

 

Hello,

I'm also struggling around the WebGL IOS video playback issue.
I manage to get a video to play on iOS with the following modifications :
-First, in the video.js script (under WebGL playback engine), add the following line after the video object creation:

Code (JavaScript):

1. video.setAttribute('playsinline', 'playsinline');

- Then, the video play action must be invoked by a user input on the HTML template. Unfortunately, Gilcat plugin isn't enough. On my side, I use a transparent button on top of the game canvas. This button is activated on demand thanks to a JS call from C# and the action on the button send a message back to the C# script to launch the video.

You can avoid this second step if the video has no sound and the VideoPlayer audioOutputMode is set to null.

I hope this can help for your projects and also Unity Team to find a better solution to this problem as soon as possible.

 

Hi, can you explain where/how you accessed the video.js to add this line of code? My videos have no audio and are activated by the player so this would be ideal for me but I don't know which script you're referring to.

 

Hi,

The video.js file can be edited from the webgl playback engine folder:
/Applications/Unity/Hub/Editor/2020.2.7f1/PlaybackEngines/WebGLSupport/BuildTools/lib/Video.js
Here is two possible implementation that work on iOS (tested on iOS 14.4):
https://share.seriousfactory.com/tmp/video-with-sound/
https://share.seriousfactory.com/tmp/video-autoplay/

 

Hey Pierre,
Couldn't understand your second part. Can you tell me how you activated an html button from c#. I understand we can send commands to JS but how do you simulate a html button press?

 

Hi,

here is a very simple example on the code in Unity. On html side, you can take a look at the source of the link I've shared on my previous post.

 

I checked your video and you say to play a video with audio we need to have a play button right? There is no way to play a video without having a button?

 

Nope, no way. This is a browser limitation where there needs to be user interaction to play videos with audio. You can have a start button in the beginning of the experience to unlock the video playback for example. And then at some point later you play the video without the user having to press play.

 

I solved the play with audio issue by listening for any click event and playing a silent audio file. My guess is Unity can't get the right permissions from Safari for whatever reason. By playing a silent audio it gives the page the correct permissions and you should be able to play a video with sound. There's my react example. It's pretty crude but it works and there's no need for a play button (although even having a play button didn't work for me).

React.useEffect(() => {
window.addEventListener('click', () => {
if (!silentAudioPlayed.current) {
audio.play();
silentAudioPlayed.current = true;
}
});
});

This is only tested on the Mac Safari. I would hope you'd just need to change the event to a touch event and it would have the same effect. Let me know how you get on.

 

Hi pierresusset,

I am working on Unity Webgl video player demo project. i am having issue of videoplayer that video is not playing on iphone web browsers. i have followed your steps like write code in video.js script and also on html side create a play button then on that button onclick method i have called the playvideofromjs() method.
after all these steps i am having the issue on iphone browser. i can see blank screen only on iphone browsers, but it is working on android and desktop browsers.

Do you have any other solution or need to write any code on html file?

 

This seems cool, I am not familiar a lot with html, can you share an example?

I just tried to copy your html but it seems not work, probably because i not understand exatcly what to do

 

Just tried it on a new iPad Pro, doesn't seem to work.

To make sure I didn't do something wrong:
- Added silent audio file in streaming assets
- Loaded up the file in index
- Added JS touchstart listener, played the audio
- Attempt to press an in-game Unity button to play a video - same permission error

 

Bumping this up.

- I managed to get a video ton play with sound on WebGL/iOS using the user touch trick on a transparent div covering the unity scene.
- I tried playing a muted video at the start of the scene (iOS is not supposed to block that if there is no user intent), I can see the first image of the video but then it doesn't play. Has anyone managed to get that to work ?

Digging into this video thing which is a bit of a headache, I tried to implement a video player that would play a sequence of urls automatically.

On iOS, as long as a player element in the dom gets a touch intent the first time it plays, you can switch to another url on that player element and it will work just fine, so it is feasible to play a list of different videos without issues.

However, looking at the Video.js file in the Unity PlayBackEngine folder, I can see that Unity recreates a new player element every time you change url in the VideoPlayer component in Unity. The previous one gets destroyed. So everytime you switch url on the VideoPlayer, you need a user touch to get the new video to start.

I tried to modify the javascript code in that Video.js in order to keep a single instance of a video element and reuse it for several videos (my Unity scene only has one VideoPlayer component so that's an acceptable compromise for my use case). I "almost" got this to work: when I change url on the VideoPlayer component, I can see that the video element in the html page behaves correctly. However, I can't get the texture to refresh in Unity. There is a JS_Video_UpdateToTexture javascript function for that, but it doesn't get called anymore once I switch from the original url on the VideoPlayer. So I'm stuck at that point, and not sure what to do (I don't have access to the videoplayer source code that handles the calls to javascript).

Has anyone tried to implement a similar use case ?

In any case, here is a copy of the modified Video.js if anyone is interested in trying something similar.

 

I would recommend You will need to check the network use of your iPhone app: Settings > WLAN > Apps Using WLAN & Cellular

Regards
John Patrick

 

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

 

how can I see the source of the link you shared?

 

can you share how to create the transparent div covering the unity scene?