Fullscreen not working in hybrid apps (Cordova)

[dpalou]

A user has recently opened an issue reporting that fullscreen in interactive videos doesn't work in the Moodle mobile app. I looked at it and I found two different issues depending on the platform, and they're both related to this part of the h5p code.

iOS

In Safari for iOS, document.documentElement.webkitRequestFullScreen exists, but it doesn't exist in the WebView used by the app. For this reason the full screen doesn't work in the app. Maybe the library should hide the full screen button if the function to request fullscreen doesn't exist?

Android

If the userAgent contains the word "version", H5P assumes it's a Safari browser. However, the Android WebView contains the word "version" but it isn't Safari. The H5P library thinks it's an old Safari version and doesn't let you use full screen. I tried commenting the safariBrowser check and the full screen started working, although I couldn't see the video (it was a black screen) so there's another problem besides this one.

Here are some user agent in mobile devices so you can see how they look like:

Android WebView: Mozilla/5.0 (Linux; Android 9; Android SDK built for x86_64 Build/PSR1.180720.093; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/69.0.3497.100 Mobile Safari/537.36 MoodleMobile

Chrome for Android: Mozilla/5.0 (Linux; Android 9; Android SDK built for x86_64 Build/PSR1.180720.093) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Mobile Safari/537.36

iOS WebView: Mozilla/5.0 (iPad; CPU OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MoodleMobile

Safari for iOS: Mozilla/5.0 (iPad; CPU OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Mobile/15E148 Safari/604.

As you can see, in Android WebView the userAgent contains the word "version" while the browser doesn't, and in iOS it's the opposite way.

[icc]

Thank you for looking this up.

For iOS, do you know if it's possible to enable this for the WebView somehow and/or if there's another property we can check on?

For Android, hopefully, we can just drop the check since Safari 6 was replaced 8 years ago. If not we could possibly add an extra check for the OS X part of the UserAgent string.

[dpalou]

Hi Frode!

We're still using UIWebView for iOS, and that WebView is deprecated. We've plans to move to WKWebView "soon", hopefully that WebView will support the fullscreen feature. I'll try to find some time to check if it does. I'll let you know what I find :)

[dpalou]

I just tested it with WKWebView and it has the same problem, the request fullscreen function doesn't exist. I didn't find any way to add it to the WebView, it was probably a design decision by the iOS devs. So I guess the best approach is to just hide the full screen button in this case.

[SanatSharma]

@icc how would one drop the check for Android. We want to make the change in our version of H5P so we can atleast go full screen in android devices.

[icc]

@SanatSharma Try this fix.
Locate the following file + line: js/h5p.js#L35 on your system.
Next, replace it with the following line:

  H5P.safariBrowser = navigator.userAgent.match(/Mac OS X.+Version\/([.\d]+)/);

This should make sure fullscreen is only disabled for older Apple devices.

[SanatSharma]

@icc Thanks, that seems to fix it in Android! The controls bar always remains even in fullscreen mode which is not ideal but I'll try to see if there's a fix for that. Ideally it should go away when there's no user click for a couple seconds.

[SanatSharma]

@icc could you check this once more? I checked this again with the latest version of the H5P plugin and it doesn't seem to work for me anymore.
Could you double check on your end??

[gtawebb]

Hello, I was wondering if anyone has any updates for this issue. I updated line 35 with the code above which has fixed the issue for Android but it seems to persist on IOS. Any help would be gratefully appreciated.

[flboywonder]

From the anecdotal feedback we are getting, there are many more institutions promoting native apps that use H5P and the UX for a majority of activities without full screen is really awful. It seems important to put some cycles on this topic.

[dpalou]

For the record, I found a way to enable the fullscreen API in WKWebView (iOS WebView), so changing the initialization of H5P.safariBrowser and H5P.fullScreenBrowserPrefix was enough to make fullscreen work in the Moodle app.

Also, the UserAgent of WKWebView for iPad no longer includes the word "iPad", now it's:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MoodleMobile

In any case, the fullscreen feature seems to work fine in our iOS app with H5P.safariBrowser = 0.

[gtawebb]

That sounds promising. I'm not using Moodle but I am using h5p in a hybrid app and I'm looking at making IOS fullscreen mode work for Course Presentation rather than Interactive Video. Did you just make the H5P.safariBrowser = 0 change or did you make changes to the UserAgent or H5P.fullScreenBrowserPrefix as well? Would you mind pasting the full code snippet if there is more to it than H5P.safariBrowser = 0 Thanks.

[dpalou]

We still haven't fully tested the solution, but I just did this:

H5P.fullScreenBrowserPrefix = 'webkit';
H5P.safariBrowser = 0;

Here are the changes:

moodlehq/moodleapp@4cb5c9b#diff-d9d2d49d2bbd859ac28d39984018754e9958b6d18346a5065889b302d46bfee7R35

To enable the fullscreen API in WKWebView I had to make this changes in the ionic-webview plugin:

https://github.com/ionic-team/cordova-plugin-ionic-webview/pull/651/files