[webview_flutter] Consistent allowsInlineMediaPlayback on iOS

[alexmarkley]

Description

By default, iPhone does not allow "inline" video in WKWebView, even if the content explicitly calls for it using the "playsinline" attribute. Instead, iPhone overrides the web view and produces a full screen video controller.

In contrast, iPad and Android provide support for "inline" media by default.

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline
See Also: https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback

Related Issues

• webview_flutter ios disable native fullscreen video flutter#25630
• webview_flutter cannot display video inline, but only on iPhone flutter#45635

Checklist

Before you create this PR confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

• I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
• !1 My PR includes unit or integration tests for all changed/updated/fixed behaviors (See [Contributor Guide]).
• All existing and new tests are passing.
• !2 I updated/added relevant documentation (doc comments with ///).
• The analyzer (flutter analyze) does not report any problems on my PR.
• I read and followed the [Flutter Style Guide].
• The title of the PR starts with the name of the plugin surrounded by square brackets, e.g. [shared_preferences]
• I updated pubspec.yaml with an appropriate new version according to the [pub versioning philosophy].
• I updated CHANGELOG.md to add a description of the change.
• I signed the [CLA].
• I am willing to follow-up on review comments in a timely manner.

Notes:

• !1 The updated behavior is inside the platform code, not sure how to test it.
• !2 This PR introduces no developer-facing changes.

Breaking Change

Does your PR require plugin users to manually update their apps to accommodate your change?

• Yes, this is a breaking change (please indicate a breaking change in CHANGELOG.md and increment major revision).
• No, this is not a breaking change.

[alexmarkley]

I went ahead and created a (very simple) patch to address this very annoying issue.

I did not see it at first but now I see there is a (better and more robust?) PR already submitted to do the job: #2227

I would be happy to abandon my PR in favor of @sarbagyastha's version if his has a chance of getting merged.

[ened]

hi @alexmarkley - cool & thank you for the PR.
Do you think we should make this flag configurable for the user (and by default keep it off, so that users who upgrade the plugin experience the same behavior as before).
In order to merge your PR, we will also need a test, version bump and a entry to the change log.
Would you be able to work on this?
Thank you!

[alexmarkley]

@ened Currently this flag's behavior is different across different Apple devices, which means that the current end user experience is inconsistent between iOS and iPad.

The current behavior on iPhone is to ignore the playsinline attribute for <video> tags, so this pull request merely allows the content to specify whether the media should be played inline or not.

As such I would be absolutely shocked if it introduced any unexpected or unwanted changes to any users of this plugin.

However, as I mentioned earlier, if we want a more robust implementation of this functionality which exposes the platform-specific flags to the Flutter code, perhaps we should encourage @sarbagyastha and get his PR accepted: #2227

On another note, with regards to a test, I don't know how that would work. How can we implement a test for this behavior?

Either way I will go ahead and rebase with a new changelog and version bump.

[alexmarkley]

@ened I went ahead and cleaned up the pull request to track the latest upstream changes.

Also, to clarify, I am having trouble seeing the value of exposing this flag at the Flutter/Widget level, since you would then have to turn it on twice -- once in your HTML5 <video> tag and once again in your Widget.

That said, I am not dogmatic about it, I'm happy to see the problem solved no matter how it gets solved. 😄

[rayliverified]

Also, to clarify, I am having trouble seeing the value of exposing this flag at the Flutter/Widget level, since you would then have to turn it on twice -- once in your HTML5 <video> tag and once again in your Widget.

A Flutter level setting would be useful because most of the videos on the web are streamed from video sharing platforms (Youtube, Vimeo, etc) with embed video settings.

Those videos are embedded with an iframe and does not support tag configurations because the code is in the iframe and controlled by the platform itself.

Thanks for making the PR!

[rayliverified]

Any update on this PR?

[alexmarkley]

@searchy2 Vimeo does allow this setting to be modified via their embed api (see the playsinline parameter here): https://developer.vimeo.com/player/sdk/embed

Either way, if we want a more robust (read: complex) solution, please see #2227

Until @sarbagyastha's solution gets merged, I'll just keep updating this PR to track master.

[vlowe85]

Been waiting for this feature for a while, currently this feature is supported in flutter_inappwebview but would rather not import both.

[alexmarkley]

I just rebased my patch against origin again. Solving this problem is a requirement for my use case, and I'm currently using this patch (until some solution gets upstreamed).

If anybody with merge rights would be willing to provide more concrete guidance on what steps would be necessary and appropriate for getting this merged, I would be happy to do a little more work to get it done.

Thanks!

[Phasor1]

Thank you @alexmarkley, i'm waiting too for an update on this solution

[alexmarkley]

I just rebased this patch against the origin again. I have no additional updates on this issue at this time.

Related issues:

• webview_flutter ios disable native fullscreen video flutter#25630
• webview_flutter cannot display video inline, but only on iPhone flutter#45635
• [webview_flutter] Is there an option to choose allowsInlineMediaPlayback on ios? flutter#42099

[CyrilHu]

any updates on this?

[lgArlequin]

Any news?

[LinetCheese]

Are there any updates on this?

[alexmarkley]

I rebased my patch against master again. Still looking for guidance on how to proceed with this.

TBH I disagree with @searchy2 and @ened. I do not believe this is a new feature, I am of the opinion that this is a bug for all affected users, and the risk of backwards-incompatible behavior is vanishingly small.

[alexmarkley]

Rebased again.

[Pebsie]

Those seem like some awfully easy conflicts to fix ^^

[alexmarkley]

Rebased again.

[Steven-Chen87]

When will this fix release?

[stuartmorgan-g]

Thanks for the contribution!

I did not see it at first but now I see there is a (better and more robust?) PR already submitted to do the job: #2227

I would be happy to abandon my PR in favor of @sarbagyastha's version if his has a chance of getting merged.

Since it appears that was landed as #3334, I'm going to close this as obsolete. If that's not the case, please let me know.