CODEWITHSUNDEEP
webviewxamarin.formsxamarin.uwp
David Shochet
David Shochet

Reputation: 5375

How to stop video playing in WebView

I work on a Xamarin.Forms app (UWP!). It has a Master-Details architecture. The Master page has a ListView, and each item in it opens a corresponding Detail page. The first Detail page has only a WebView that plays a YouTube video upon loading. The second Detail view has just a placeholder label for now.

Where I switch from first Detail page to the second, the sound of the video from the first Detail page is still heard. And when I switch back to the first Detail page, the video loads again, and now I hear two voices. How can I stop the video upon switching to the second Detail page and resume when going back? If this is not possible, how can I just stop the video upon leaving its Detail page?

I guess I could do something in an overridden OnDisappearing() method of the detail page:

    protected override void OnDisappearing()
    {
        MyWebView.NavigateToString(""); // This does not work, as NavigateToString() is not part of WebView. 
        base.OnDisappearing();
    }

What can I use to stop playing video in WebView?

Upvotes: 2

Views: 1595

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

Could you please tell what I can use to stop playing video in WebView?

For your requirement, you could approach with injecting Eval java script. 

private  void Button_Clicked(object sender, EventArgs e)
{
    string pausefunctionString = @"
    var videos = document.querySelectorAll('video');  
    [].forEach.call(videos, function(video) { video.pause(); });
    "; 
    MyWebView.Eval(pausefunctionString);
}

Update

I have re-checked your issue, when you navigate to another page, the WebView has not be released correctly. If you want to stop the WebView video play, you could make it navigate to blank page via custom WebViewRenderer.

[assembly: ExportRenderer(typeof(WebView), typeof(CustomWebViewRender))]

namespace App4.UWP
{
    class CustomWebViewRender : WebViewRenderer
    {
        private Windows.UI.Xaml.Controls.WebView _WebView;
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                var source = Element.Source as UrlWebViewSource;
                _WebView = new Windows.UI.Xaml.Controls.WebView();
                SetNativeControl(_WebView);
            }
        }
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == WebView.SourceProperty.PropertyName)
            {
                var source = Element.Source as UrlWebViewSource;
                if (source.Url == string.Empty)
                {
                    _WebView.NavigateToString(string.Empty);
                }
            }
        }
    }
}

Usage

protected override void OnAppearing()
{
    base.OnAppearing();
    MyWebView.Source = "https://www.youtube.com";
}
protected override void OnDisappearing()
{
    MyWebView.Source = string.Empty;
    base.OnDisappearing();
}

Xaml

<WebView HeightRequest="500" WidthRequest="500"  x:Name="MyWebView"/>

Upvotes: 1

Related Questions