Nativescript: Set allowsInlineMediaPlayback for WebView

[erikandershed]

Did you verify this is a real problem by searching the [NativeScript Forum]

yes

Tell us about the problem

Where do I set the property "allowsInlineMediaPlayback" in NativeScript for a WebView? Android has alos similar function, where do I set it?

Which platform(s) does your issue occur on?

iOS/Android

Please provide the following version numbers that your issue occurs with:

NativeScript 3.4

Please tell us how to recreate the issue in as much detail as possible.

In Xcode you need set allowsInlineMediaPlayback for WebView to play a video inline. I can't find a way to set this settings to NativeScript WebView.

Xcode
theConfiguration!.allowsInlineMediaPlayback = true; theConfiguration!.mediaPlaybackRequiresUserAction = false; self.wkWebView = WKWebView(frame: self.getFrame(), configuration: theConfiguration!)

NatieScripte
if (page.ios) { webView.ios.allowsInlineMediaPlayback = true; webView.ios.mediaPlaybackRequiresUserAction = false; }

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @erikandershed,
To enable the inline video in iOS you should set up allowsPictureInPictureMediaPlayback and allowsPictureInPictureMediaPlayback to true before initialising the WebView component. Currently, this could happen only if you add those properties directly in the tns-core-modules/ui/web-view-ios.js file. For example:

var WebView = (function (_super) {
    __extends(WebView, _super);
    function WebView() {
        var _this = _super.call(this) || this;
        var configuration = WKWebViewConfiguration.new();
        _this._delegate = WKNavigationDelegateImpl.initWithOwner(new WeakRef(_this));
        var jScript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'initial-scale=1.0'); document.getElementsByTagName('head')[0].appendChild(meta);";
        var wkUScript = WKUserScript.alloc().initWithSourceInjectionTimeForMainFrameOnly(jScript, 1, true);
        var wkUController = WKUserContentController.new();
        wkUController.addUserScript(wkUScript);
        configuration.userContentController = wkUController;
        configuration.allowsInlineMediaPlayback = true;
        configuration.allowsPictureInPictureMediaPlayback = true;
        configuration.preferences.setValueForKey(true, 'allowFileAccessFromFileURLs');
        _this.nativeViewProtected = _this._ios = new WKWebView({
            frame: CGRectZero,
            configuration: configuration
        });
        return _this;
    }
....
}

Regarding that this seems to be a perfect candidate for creating a new property which allows this functionality. More about our contribution guidelines can be found here.

Regarding Android, you can review the provided solution in their documentation.

[erikandershed]

Thanks it works!

[NickIliev]

Closing the feature as it is iOS-specific and the provided workaround (via accessing the native API) is resolving the issue.

[erikandershed]

Hey! I can find "tns-core-modules/ui/web-view-ios.js" to be able to change this. It seems like NativeScript have changed in the later versions.

[erikandershed]

I did fund this here:
node_modules/@nativescript/cure/ui/web-view/index.ios.js

And add this:

configuration.allowsInlineMediaPlayback = true; configuration.allowsPictureInPictureMediaPlayback = true;

after:

configuration.userContentController = wkUController;