xamarin WKWebView, ipad does not support youtube full screen

Question

xamarin WKWebView, ipad does not support youtube full screen

장주명 41

implemented a webview using the WkWebview renderer.

Fullscreen works fine on ipone. But it doesn't work on iPad.

An image like the one below will appear.

I saw an article saying to do webViewConfiguration.allowsInlineMediaPlayback = true and applied it but it didn't work. What's the problem?

Here is my code.

public class MyWebViewRenderer : WkWebViewRenderer, IWKScriptMessageHandler, IWKNavigationDelegate  
   {  
  
    WKUserContentController userController;  
  
        public MyWebViewRenderer() : this(new WKWebViewConfiguration())  
        {  
              
        }  
  
        public MyWebViewRenderer(WKWebViewConfiguration config) : base(config)  
        {  
  
            userController = config.UserContentController;  
            var script = new WKUserScript(new NSString(_JavascriptFunction_CSharpOpenWeb), WKUserScriptInjectionTime.AtDocumentEnd, false);  
  
            userController.AddUserScript(script);  
              
            userController.AddScriptMessageHandler(this, "invokeAction_CSharpOpenWeb");  
        }  
  
protected async override void OnElementChanged(VisualElementChangedEventArgs e)  
        {  
            base.OnElementChanged(e);  
  
            
  
            if (e.OldElement != null)  
            {  
                userController.RemoveAllUserScripts();  
                userController.RemoveScriptMessageHandler("invokeAction_CSharpOpenWeb");  
                MyWebView myWebView = e.OldElement as MyWebView;  
                myWebView.Cleanup();  
            }  
  
            if (e.NewElement != null)  
            {  
                this.NavigationDelegate = new MyNavigationDelegate(this);  
                 
                var webView = (MyWebView)Element;  
                   
                webView.UriChanged += async (s1, e1) =>  
                {  
                      
                        NSUrl nsurl = new NSUrl(webView.Uri);  
                        Configuration.AllowsInlineMediaPlayback = true;  
                        NSMutableUrlRequest request = new NSMutableUrlRequest(nsurl);  
                         
                        await SetCookies();  
                        
                        LoadRequest(request);  
                };  
  
                if (!string.IsNullOrEmpty(webView.Uri))  
                {  
                     
                        NSUrl nsurl = new NSUrl(webView.Uri);  
                        NSMutableUrlRequest request = new NSMutableUrlRequest(nsurl);  
                        Configuration.AllowsInlineMediaPlayback = true;  
  
                        await SetCookies();  
  
                        LoadRequest(request);  
                }  
            }  
        }  
}

Can you tell me what I did wrong?

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-01-17T09:40:07.31+00:00

Hi @장주명 . May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out.

1 answer

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-01-17T09:40:07.31+00:00

Hi @장주명 . May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out.

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

The default value of this property is false for iPhone and true for iPad, refer to https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback
I test the code, the video plays inline in iPhone , iPad simulator will always show "Your browser does not support full screen", it will not be full screen whether I set Configuration.AllowsInlineMediaPlayback to true or false. So I change the renderer and set false, it works, you could have a try.

 public class MyWebViewRenderer : ViewRenderer<MyWebView, WKWebView>  
    {  
        WKWebView _wkWebView;  
  
        protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)  
        {  
            base.OnElementChanged(e);  
  
            if (Control == null)  
            {  
                var config = new WKWebViewConfiguration();  
                config.AllowsInlineMediaPlayback = false;  
  
                _wkWebView = new WKWebView(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, UIScreen.MainScreen.Bounds.Size.Height), config);  
                //transparent background  
                _wkWebView.BackgroundColor = UIColor.Clear;  
                _wkWebView.ScrollView.BackgroundColor = UIColor.Clear;  
                _wkWebView.Opaque = false;  
                SetNativeControl(_wkWebView);  
  
            }  
        }  
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)  
        {  
            base.OnElementPropertyChanged(sender, e);  
  
            if (e.PropertyName == "Uri")  
            {  
                Control.LoadRequest(NSUrlRequest.FromUrl(new NSUrl("https://www.youtube.com/watch?v=JH8ekYJrFHs")));  
  
            }  
        }  
    }

I'm afraid the key point is the constructor method, but when I change this property in public MyWebViewRenderer(WKWebViewConfiguration config) : base(config) and public MyWebViewRenderer() : this(new WKWebViewConfiguration()) , it still doesn't work. You could test it.

Best Regards,
Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

xamarin WKWebView, ipad does not support youtube full screen

1 answer

Your answer