Forum Xamarin.Forms

Xamarin forms: Webview for playing video is not working in iPhone?

SreeeeSreeee INMember ✭✭✭✭✭

I am using Webview for playing video and audio and it is working fine on android and iPhone simulators. But on the real iPhone, video playing is not working fine.

For playing the video on the iPhone, I need to tap the video play button multiple times. After that also it takes a long time to play the video. Another important thing is my video links have no video format(.mp4,.mkv).

XAML

<WebView 
    x:Name="web_view"
    HeightRequest="200"
    WidthRequest="200"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="FillAndExpand"/>

XAML.cs

web_view.Source = "https://player.vimeo.com/video/303543322";

I tried Plugin.MediaManager.Forms, but it needs video format(.mp4,.mkv) in the link, otherwise it will not work. So is there any way to fix this issue in webview itself or should I go for any other player(video and audio) which supports playing video without video format?

Best Answer

  • SreeeeSreeee IN ✭✭✭✭✭
    Accepted Answer

    Firstly, create a new class inherited from WebView in your PCL. And define a bindable property pointing what url should be loaded on iOS.

    public class MyWebView : WebView
    {
        public static readonly BindableProperty UrlProperty = BindableProperty.Create(
            propertyName: "Url",
            returnType: typeof(string),
            declaringType: typeof(MyWebView),
            defaultValue: default(string));
    
        public string Url
        {
            get { return (string)GetValue(UrlProperty); }
            set { SetValue(UrlProperty, value); }
        }
    }
    

    The custom renderer for this class on iOS:

    [assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
    namespace xxx.iOS
    {
        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();
                    _wkWebView = new WKWebView(Frame, config);
                    SetNativeControl(_wkWebView);
                }
                if (e.NewElement != null)
                {
                    Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Url)));
                }
            }
        }
    }
    

    For Android

    [assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
    namespace xxx.Droid
    {
        public class MyWebViewRenderer : WebViewRenderer
        {
            public MyWebViewRenderer(Context context) : base(context)
            {
    
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
            {
                base.OnElementChanged(e);
    
                if (Control != null)
                {
                    var customWebView = Element as MyWebView;
                    Control.Settings.AllowUniversalAccessFromFileURLs = true;
    
                    Control.Settings.JavaScriptEnabled = true;    
                    Control.LoadUrl(customWebView.Url);          
                }
    
            }
        }
    }
    

    At last you can use this custom control in the PCL's page, here is the usage:

    <StackLayout>
        <local:MyWebView Url="https://www.microsoft.com" VerticalOptions="FillAndExpand"/>
    </StackLayout>
    

Answers

  • ColeXColeX Member, Xamarin Team Xamurai

    Check new Video Policies for iOS , On iOS 9, <video> will only begin playing as a result of a user gesture.

    This is a known issue reported here .

  • SreeeeSreeee INMember ✭✭✭✭✭

    @ColeX Single gesture is fine, but always 5 times need to tap for playing video.

  • SreeeeSreeee INMember ✭✭✭✭✭

    Hi @ColeX Is there any way to fix this issue? My client always reporting this as an issue. He is telling that, needs to tap multiple times for playing video. Also, there is a threat from Appstore: ITMS-90809: Deprecated API Usage-Apple will stop accepting submissions of apps that use UIWebView API. So is there any other way to play video in UI other than webview without the video format in the video link? But it is working fine on android and ios simulators.

  • SreeeeSreeee INMember ✭✭✭✭✭
    Accepted Answer

    Firstly, create a new class inherited from WebView in your PCL. And define a bindable property pointing what url should be loaded on iOS.

    public class MyWebView : WebView
    {
        public static readonly BindableProperty UrlProperty = BindableProperty.Create(
            propertyName: "Url",
            returnType: typeof(string),
            declaringType: typeof(MyWebView),
            defaultValue: default(string));
    
        public string Url
        {
            get { return (string)GetValue(UrlProperty); }
            set { SetValue(UrlProperty, value); }
        }
    }
    

    The custom renderer for this class on iOS:

    [assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
    namespace xxx.iOS
    {
        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();
                    _wkWebView = new WKWebView(Frame, config);
                    SetNativeControl(_wkWebView);
                }
                if (e.NewElement != null)
                {
                    Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Url)));
                }
            }
        }
    }
    

    For Android

    [assembly: ExportRenderer(typeof(MyWebView), typeof(MyWebViewRenderer))]
    namespace xxx.Droid
    {
        public class MyWebViewRenderer : WebViewRenderer
        {
            public MyWebViewRenderer(Context context) : base(context)
            {
    
            }
    
            protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
            {
                base.OnElementChanged(e);
    
                if (Control != null)
                {
                    var customWebView = Element as MyWebView;
                    Control.Settings.AllowUniversalAccessFromFileURLs = true;
    
                    Control.Settings.JavaScriptEnabled = true;    
                    Control.LoadUrl(customWebView.Url);          
                }
    
            }
        }
    }
    

    At last you can use this custom control in the PCL's page, here is the usage:

    <StackLayout>
        <local:MyWebView Url="https://www.microsoft.com" VerticalOptions="FillAndExpand"/>
    </StackLayout>
    
Sign In or Register to comment.