Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Teads: AutoplayDetection causes fullscreen video on WKWebView #11438

Open
webberig opened this issue May 3, 2024 · 13 comments
Open

Teads: AutoplayDetection causes fullscreen video on WKWebView #11438

webberig opened this issue May 3, 2024 · 13 comments
Labels

Comments

@webberig
Copy link

webberig commented May 3, 2024

Type of issue

Bug

Description

We encountered some strange behavior in our mobile app after updating prebid.js. A full screen native media player appears with a black 1-second video.

20240430_upd_r200_ios_black_overlay.mp4

This is caused by the autoplay detection:
https://github.com/prebid/Prebid.js/blob/7ab6165e342294fafa087135af219f3f88f0e220/libraries/autoplayDetection/autoplay.js

The app is built using Cordova and Ionic which uses a WKWebView component to render the web application. Apparently, WKWebView has a property allowsInlineMediaPlayback which - when turned off - forces video content to be displayed in a native fullscreen controller.

This property is turned off by default on iPhone, turned on by default on iPad.

The autoplay detection of prebid.js plays a small video to determine wether autoplay is supported, which is invisible in most common browsers but seems to have a disturbing side effect in WKWebView.

Steps to reproduce

This can only be reproduced in a native iOS application using a WKWebView which in turn contains a webpage that is running prebid.js.

Test page

Providing a demo app has little use as you need to have XCode installed and run the app in Simulator. One does not simply install an app from unknown origin on iPhones ;-)

I'm hoping the WKWebView documentation is enough to prove the bug being presented.

Expected results

prebid.js should not bother a user with a fullscreen 1s black video. The current approach can be considered hacky at best, so I would recommend looking at proper feature detection such as this draft spec: https://www.w3.org/TR/autoplay-detection/

Actual results

As soon as prebid.js is loaded, the user gets a fullscreen 1s black video. After closing it (by swiping or a close button in a corner of the screen), normal behavior is resumed.

Platform details

Tested with prebid.js v8.45.0
Browser is a WKWebView inside a native iOS mobile app, built using XCode 15.3. According to docs, this property is present in iOS version >= 8.0

Other information

@patmmccann
Copy link
Collaborator

patmmccann commented May 6, 2024

cc @github-matthieu-wipliez

fwiw only Teads adapter uses this. One solution could be to disable Teads while the fix is pending.

@patmmccann patmmccann added the bug label May 6, 2024
@github-matthieu-wipliez
Copy link
Contributor

Hi @webberig, sorry for the trouble! I'm not sure why the video is displayed as the video element we create is not even inserted in the DOM. I'll try to see if setting display: none on the element fixes this.

I would have been very happy to use a standard feature, unfortunately the getAutoplayPolicy is only available on Firefox :/

@patmmccann patmmccann changed the title AutoplayDetection causes fullscreen video on WKWebView Teads: AutoplayDetection causes fullscreen video on WKWebView May 6, 2024
@github-matthieu-wipliez
Copy link
Contributor

Hi again, I have failed to reproduce it locally using a WKWebView with a configuration that sets allowsInlineMediaPlayback = false and loads a simple HTML page running the piece of script from the autoplay detection. I'm using XCode 15.3 and tested with the simulator (iPhone 15, iOS 17.2 and iPhone 15, iOS 17.4).

How is Prebid.js loaded? Do you have something else specific on your WKWebView? I'm trying to find a way to reproduce it so I can find a way to fix it

@whatadewitt
Copy link

@github-matthieu-wipliez does your cordova config support AllowInlineMediaPlayback for iOS? (https://cordova.apache.org/docs/en/3.2.0/guide/platforms/ios/config.html)

It would appear the autoplay detection would be great, but is unsupported at this time on most browsers. If you check the doc link above I think there is a solution you could try in there?

@github-matthieu-wipliez
Copy link
Contributor

Hi @webberig, good news, I've managed to reproduce the bug!

@whatadewitt I don't use Cordova, I'm directly testing in an iOS app using a WKWebView with a custom configuration.

I had not set mediaTypesRequiringUserActionForPlayback so it still had the default value (which appears to be .all) so even if I set allowsInlineMediaPlayback = false when I started the autoplay detection then iOS would prevent the video from starting (because no gesture was made). Setting both allowsInlineMediaPlayback = false and mediaTypesRequiringUserActionForPlayback = [] makes the video player start in fullscreen without any user interaction, as in your example.

That being said, the Teads ad player appears to assume that allowsInlineMediaPlayback is true and that video would play inline and not in fullscreen; in other words, even if I fix autoplay detection, our ad player would still play video ads directly in fullscreen (not sure if this is what you intend?)

I see several ways to fix this:

  • in your app, leave mediaTypesRequiringUserActionForPlayback to its default value so that no video opens for a user until they interact with the page.
  • set allowsInlineMediaPlayback = true in your application. It allows inline playback, but video without playsinline will still be in fullscreen, that's kind of the best of both worlds.
  • in the autoplay detection, I add a condition to check if I can play the video inline, and if I can't I don't run the autoplay detection.

What do you think?

@webberig
Copy link
Author

webberig commented May 7, 2024

Thanks for the efforts @github-matthieu-wipliez!

It appears that the cordova ionic-webview has an undocumented configuration which allows us to set the allowsInlineMediaPlayback to true (https://github.com/ionic-team/cordova-plugin-ionic-webview/blob/master/src/ios/CDVWKWebViewEngine.m#L204). That did solve it for our app. 🎉

It would be an improvement to prebid if you were able to detect that inline playback is allowed or not. Not just for the mock video, but for real ads too. Displaying ads in a fullscreen native player is probably not desirable ;-)

@github-matthieu-wipliez
Copy link
Contributor

That did solve it for our app. 🎉

Great!

I have tried to see if there was a way to detect if the video plays inline or not, and it seems that it's only possible to do that after the video has started playing (so it's already playing in fullscreen).

After discussing with my colleagues, our Teads player is only supposed to be used in an environment where playsinline is true. I propose that we update our documentation here: https://github.com/prebid/prebid.github.io/blob/891d45baf2f20eacfe3b9fa7045692d7db7bf26d/dev-docs/bidders/teads.md?plain=1#L28
to clearly state that requirement. @patmmccann is it an acceptable resolution?

@whatadewitt
Copy link

Apologies @github-matthieu-wipliez I tagged you in my response where I should have tagged @webberig -- regardless, glad you are sorted :)

@patmmccann
Copy link
Collaborator

@github-matthieu-wipliez we'll discuss in committee tomorrow. I'm not familiar enough with how often this may occur to weigh in

@aanton
Copy link

aanton commented May 7, 2024

I have tried to see if there was a way to detect if the video plays inline or not, and it seems that it's only possible to do that after the video has started playing (so it's already playing in fullscreen).

Could the "autoplay detection" feature be optional to avoid this issue on current iOS APPs that does not have the proper configuration?

@github-matthieu-wipliez
Copy link
Contributor

Could the "autoplay detection" feature be optional to avoid this issue on current iOS APPs that does not have the proper configuration?

Something I don't quite understand is that this feature has been part of the Teads ad player for years without any issues. Do you have the Teads adapter enabled by default but not configured? Is it playing any ads?

@aanton
Copy link

aanton commented May 7, 2024

Hi @github-matthieu-wipliez,

Something I don't quite understand is that this feature has been part of the Teads ad player for years without any issues. Do you have the Teads adapter enabled by default but not configured? Is it playing any ads?

We use the Teads adapter in our Prebid integration, but only with banner media types. After a recent upgrade of the Prebid version, this issue has appeared. It is related to the automatic "autoplay detection" recently added in

// starts detection as soon as this library is loaded
startDetection();

That code was not included in previous versions of the Teads adapter (I have looked for it in 8.36.0 version). About using the "Teads ad player", I am not sure about it. I don't know the resources used when Teads wins the auction and its creative is displayed. As I have commented, we only use the Teads adapter for banner media types.

Thanks for your help!

@lcorrigall
Copy link

Discussed in the PMC, and we should also add this situation to our documentation as other bidders may also run into this problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Tracking
Development

No branches or pull requests

6 participants