IOS 13 wkwebview inline video playback

Hi,

This is not really new but coming off the older uiwebview to wkwebview the html5 inline vid does not work any longer. Looking online it appears there is a flag that can be set for the wkwebview

https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback

Any way this could be exposed in the configs?

The browsersettings module should let you do this:

"browsersettings": {
    "config": {
        "media_playback": {
            "inline_video": true,
            "autoplay_video": true,
            "enable_background_audio": true,
            "enable_html5_audio": true
        },
        "accept_cookies": true
    },
    "version": "1.6",
},

https://trigger.io/modules/browsersettings/current/docs/index.html

Hi Antoine,

Let me give this a shot!

Thanks

It does not seem to be working…

here is the code I’m trying to run

The config looks like this

“browsersettings”: {
“version”: “1.6”,
“config”: {
“media_playback”: {
“inline_video”: true,
“autoplay_video”: true,
“enable_background_audio”: true,
“enable_html5_audio”: true,
“respect_playing_audio”: true
},
“accept_cookies”: true
}
}
},

I’m using wkwebview just a still image on the screen

I have spent way too much time on this and it still does not work, so I’m just going to abandon the effort at this point however what I was able to determin is that, for some strange reason iPad honors it, while iPhones (simulator [iphone 11] and device [iPhone XR]) do not.

To test this out, I used as basic a setup as possible

<!doctype html>
<html lang="en-US">
<head>
<video id="merivideo" autoplay loop muted playsinline webkit-playsinline src="https://shaktisinghcheema.com/wp-content/uploads/2019/10/Laptop-63.mp4"></video>
</body>
</html>

Not my video, was used for testing only. I’m using the browser extension module for plays inline etc but still will not work, just a still picture. I figure this is more of an IOS issue but not sure why ipad would work and iPhone would not, seeing as they are the same 13.3 OS version they should be the same mobile safari version as well.

Whoo boy, thank you for digging into this!

I’ve now also investigated on our side and the following turns out to be the long and short of it:

  • iOS 13 no longer allows you to modify WKWebView configuration attributes after it is created. This is why the allowsInlineMediaPlayback attribute was not being respected.
  • The webkit-playsinline DOM attribute for the <video> tag has been promoted to playsinline and iOS 13 does not provide backwards compatibility for the vendor-prefixed version :man_facepalming:

I’ve pushed some fixes and the following works for me now:

  • Update platform to: "platform_version": "v2.8.5"
  • Update browsersettings module to "version": "1.7"

Little late to the reply here but does autoplay work for you as well or just in-lie? Can seem to get auto play to work locally anyhow

I tested this and it looks like Apple will only automatically play the video fullscreen if you have disallowed inline video.

Otherwise it will autoplay inline.

So you have to choose one of:

  • Autoplay fullscreen video but no inline video.
  • Inline video but no fullscreen autoplay.

Worse, it’s also not possible to change the allowsInlineMediaPlayback configuration for WKWebView at runtime as this has to be specified before it is created.

If you need to do both my suggestion is that you try configuring the webview for inline video and then use the media module to play fullscreen content.

Hi Antoine,

I was messing around with this yesterday, going over things trying to get this to work on IOS when I noticed something while reading the description text.

I had the ‘require user action’ set to true, this was causing the autoplay not to work, once I removed that it seems :crossed_fingers: to work, however I do have to use JS to trigger the auto play.

Still doing testing but at least it progress. Nothing new I guess with IOS and things that should ‘work’ not ‘working’ anyhow, if I get it working right, I’ll post the full code for others who may have the same problem.

1 Like