Forum Xamarin.Forms

Controlling WebView settings on specific platforms?

NOTE: I had to redact some links because of this forum. So some of the code below is incomplete...

I'm trying to get videos to autoplay through WebView; if someone has a better suggestion, I'm all ears. (youtube and/or vimeo)

The WebView policies seem to be preventing the videos from autoplaying, so I wanted to set setMediaPlaybackRequiresUserGesture(false) on the component. That applies for Android, so in pseudo-code, it's something along the lines of:

    // pseudo code
    WebView wv = new WebView();
    wv.getSettings().setMediaPlaybackRequiresUserGesture(false);

I'm not sure how to combine something like this with the fact I have my <WebView Source="..." /> component existing in the shared Forms. I've tried using mute=1 and mute=0 without a difference.

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="[redacted]" 
        xmlns:x="[redacted]"
        x:Class="BlankFormsApp01.SecondPage">
        <ContentPage.Content>

            <WebView Source="[redacted]/AZS5cgybKcI?autoplay=1&amp;mute=1&amp;controls=0&amp;disablekb=1&amp;enablejsapi=1&amp;fs=0&amp;iv_load_policy=3&amp;loop=0&amp;playsinline=1&amp;rel=0&amp;"
                     HorizontalOptions="CenterAndExpand"
                     WidthRequest="380"
                     HeightRequest="700"
                     />

        </ContentPage.Content>
    </ContentPage>

What sort of approach am I looking for here? How do I apply that Android specific code to my WebView in Forms? Do I need to create a controller in Android that gets called from one of my Shared code behind files? That being said, what's the approach for inline autoplayback on iOS?

I'd be open to a native component of some kind as opposed to embedding a WebView, but I wasn't able to find anything for that.

Anyway, I'm open to all sorts of suggestions.. but trying to understand how to combine Android specific settings that are laid out in Forms.

Thanks everyone!

Posts

  • JohnHardmanJohnHardman GBUniversity mod

    @whiskeyandcigars said:
    What sort of approach am I looking for here? How do I apply that Android specific code to my WebView in Forms?

    Two options spring to mind:
    (1) Implement a custom WebViewRenderer for each platform where you require platform-specific code
    (2) Use JavaScript, passing a different JavaScript script to the WebView for each platform that requires platform-specific code. See WebView.EvaluateJavaScriptAsync and WebView.Eval

  • @JohnHardman said:

    @whiskeyandcigars said:
    What sort of approach am I looking for here? How do I apply that Android specific code to my WebView in Forms?

    Two options spring to mind:
    (1) Implement a custom WebViewRenderer for each platform where you require platform-specific code
    (2) Use JavaScript, passing a different JavaScript script to the WebView for each platform that requires platform-specific code. See WebView.EvaluateJavaScriptAsync and WebView.Eval

    I'm interested in learning more about #1. If you have any links to help get me started, that'd be great.

    For #2, have you tried this with proper results? Ordinarily in WebView, trying to automate a JavaScript play action won't override the restriction until a user gesture is committed. With the Eval+EvaluateJavascripAsync... would that bypass a user interaction and/or simulate one?

    Thanks!

  • JohnHardmanJohnHardman GBUniversity mod
    edited March 2019

    @whiskeyandcigars said:
    I'm interested in learning more about #1. If you have any links to help get me started, that'd be great.

    I haven't tested this, but the Android renderer would be something like this (with exception handling added):

    [assembly: ExportRenderer(typeof(MyAppWebView), typeof(MyAppAndroid.MyAppWebViewRenderer))]
    namespace MyAppAndroid
    {
        public class MyAppWebViewRenderer : WebViewRenderer // inherits IDisposable
        {
            protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
            {
                base.OnElementChanged(e);
    
                if ((!(e.NewElement is null)) && (e.OldElement is null))
                {
                    if (Control?.Settings != null)
                    {
                        Control.Settings.MediaPlaybackRequiresUserGesture = false;
                    }
                }
            }
        }
    }
    

    In your existing portable/shared code, create a subclass of WebView called MyAppWebView. Where you currently use WebView in your code, change to use MyAppWebView. Put the renderer in your Android-specific project. Then give it a test. If it doesn't work as shown, you could try adding '''Control.Reload();``` after setting the boolean to false.

    @whiskeyandcigars said:
    For #2, have you tried this with proper results?

    I use (2) for doing various things with JavaScript inside a WebView. I don't do anything with media playback though.

  • Thanks for #1.

    I found this other thread that has more details on your example; which may help others in the future.

    forums.xamarin.com/discussion/129626/how-does-one-implement-wkwebview-ios-in-a-cross-platform-application

Sign In or Register to comment.