WebGL iOS video playback

[ASquareDevs]

So I understand that there's an issue with playing video in WebGL on iOS devices, but just recently there has been a solution found that uses Unity's video player. Is there a way we can get a similar solution to work for AvProVideo?

The solution package can be downloaded here.... https://forum.unity.com/attachments/iosvideo-unitypackage.825305/

The user that found it posted it here as well.. https://forum.unity.com/threads/unity-webgl-video-player-doesnt-play-on-ios-mobile.930420/

It uses a user generated action through an HTML created button that has a callback to the video creation function in Unity when clicked. Just wanted to give you guys a heads up that there is a temporary solution out there to see if you could replicate it using your plugin.

• Unity version: 2021.1.1f1

[ASquareDevs]

Was there any luck replicating it or were you guys not able to get to this ticket yet?

[kahnivore]

Hi @ASquareDevs

We'll get back to you as soon as we've been able to look into this properly.

Thanks

[ASquareDevs]

Hey! Our team was wondering if there was any forward progress on this ticket?

[ASquareDevs]

Here is an example of unity video working on Webgl mobile IOS. The main issue is Webgl IOS wants the user to call play on videos and won't auto play. We work around it by using some JavaScript to make an html button that the user has to press to get past the permission issue of the user having to call play. https://github.com/ASquareDevs/UnityVideoWebglDemo

[DerrickBarra]

@kahnivore : Any progress on this? We really want to use AVPro on WebGL since you guys support HLS streaming but we need this bug to be fixed. Please check out the link posted to the repo, it shows the current process for making videos play on iOS WebGL via a javascript button tap.

[DerrickBarra]

@kahnivore @MorrisRH Hi, any updates on this ticket?

[kahnivore]

We tried the example you linked but so far without success. Unfortunately we haven't had enough time to look into it further .

Have you had any luck implementing it yourselves?

[ASquareDevs]

https://drive.google.com/drive/folders/1jctLc8pRU2gO_4nXRT-F_276tlxmAuei?usp=sharing The above link contains tutorial videos that will help you set up a WebGL build as well as how to upload it to your own personal server. Along with these tutorial videos, there is an example video of it working on our iOS device (iPhone SE 15.0) and a text file for additional instructions.

GitHub Project: https://github.com/ASquareDevs/UnityVideoWebglDemo

Here's a working link from the GitHub project https://brandxr-discovery.s3.amazonaws.com/WebGL/WebGl+Video+Example+for+AvPro/index.html

[AndrewRH]

Thanks @ASquareDevs for the nice examples etc - I'm sure it will be very helpful.

I just want to clarify what you want . It seems like you have a working solution - so what do you want us to do?

I guess you want us to integrate this solution so it's easier to deploy without all of these steps. We will would have to see if that's possible. I haven't watched your tutorial videos yet, but if it involves adding an HTML button to click then I'm not sure how we can make a generic way to add a button.....

Thanks,

[DerrickBarra]

@AndrewRH the issue is that this type of solution, clicking a button in javascript to make a video play on WebGL iOS does not work with AVPro Video, but it does with Unity video player.

[KeigoTakamura]

I have a concrete implementation proposal iOS Safari is the worst and worst browser, but there is a solution

What are the specific restrictions on video playback restrictions on iOS Safari? Playing the video by the user Jesser. It's a bit annoying in Unity because you can't manipulate browser events directly with js like three.js. The technical difficulty is not so high

However, I also understand that AvPro ​​Video is a huge asset, so it is difficult to add functions without polluting the design. This is because the playback Event is defined by the unified C # interface in each Platform, so only one extra flow will be forced.

・ Premise It's impossible to tell Safari a user jeweler with Unity C # and uGUI elements alone I need to tell Safari that I'm a user jescher using javascript

·solution Fire JavaScriptEvent from Unity uGUI Button to start playing the video

·suggestion Add iOS-only js Event to AvProVideo.jslib.

    iOSForthPlay: function (playerIndex) {
        if (!_hasVideos(playerIndex)) {
            return 0;
        }

        document.documentElement.addEventListener('pointerup', function () {
            const curTIme = _videos[playerIndex].vid.currentTime;
            _videos[playerIndex].vid.play();
        }, { once: true });

    }

Make the above jslib Script call Unity's Play method from Unity Event Trigger with PointerDown Then the user Jesser will call iOSForthPlay () and the playback Event will be pointer up: addEventListener. Then, the moment the user releases the finger, the playback Event will be called and it will be playable.

However, there are some issues with the above code

Since there is no way to see the UA from Unity C #, it will be a little difficult to deal with the behavior of Windows Chrome and Android Chrome.

If you are a general front-end engineer, you can solve it using video.js etc., but Unity engineer does not have such a convenient thing, so if there is a better solution to solve it, smartly switch the playback implementation according to UA You should be able to

I'm not good at English, so I'm writing from Japanese with Google Translate I'm sorry if it's hard to understand (> _ <) @AndrewRH