如何停止在 WebView 中播放视频

问题描述

我在 Xamarin.Forms 应用(UWP！)上工作.它具有主细节架构.Master 页面有一个 ListView，其中的每一项都会打开一个对应的 Detail 页面.第一个详细信息页面只有一个 WebView，可以在加载时播放 YouTube 视频.第二个细节视图现在只有一个占位符标签.

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?

我想我可以在详细信息页面的重写 OnDisappearing() 方法中做一些事情:

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();
    }

我可以用什么来停止在 WebView 中播放视频?

What can I use to stop playing video in WebView?

推荐答案

根据您的要求，您可以通过注入 Eval java 脚本.

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);
}

更新

我已经重新检查了您的问题，当您导航到另一个页面时，WebView 没有正确发布.如果您想停止 WebView 视频播放，您可以通过自定义 WebViewRenderer 使其导航到空白页面.

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);
                }
            }
        }
    }
}

使用

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"/>

这篇关于如何停止在 WebView 中播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！