时间戳

首页 > 解决方案 > Xamarin Forms：以编程方式暂停在 webview 中播放的视频或音频

xamarin.forms - Xamarin Forms：以编程方式暂停在 webview 中播放的视频或音频

问题描述

我正在使用自定义 webview 来播放视频和音频。从视频或音频页面单击后退按钮时，我需要暂停视频。我从这个线程尝试了以下解决方案，但它不起作用。

string pausefunctionString = @"var videos = document.querySelectorAll('video');  
                        [].forEach.call(videos, function(video) { video.pause(); });
                        ";
web_view.Eval(pausefunctionString);

我的数据有两种格式：

  1. 单独的视频或音频链接。
  2. 具有多个视频链接的 HTML 数据。

上述解决方案不适用于两种格式的 ios 和 windows。但是当 webview 的源是视频 URL 时，它适用于 android。当源是 HTML 数据时，此解决方案在 android 中不起作用。

为了解析 HTML 数据，我使用以下代码：

string htmlData = "htmldata";
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = htmlData;
advanced_web_view.Source = htmlSource;

另外，我的 webview 需要透明背景。我尝试了以下 2 个代码，但没有获得透明背景。

//code1
this.BackgroundColor = UIColor.Clear;
//code2
this.Opaque = false;
this.BackgroundColor = Color.Transparent.ToUIColor();

更新

我以一种简单而棘手的方式解决了 ios 上的视频或音频暂停问题。

我只是将 webview 源或 Url 值设置为如下所示的空白数据。所以当我从视频页面转到另一个页面时，视频会自动停止。

web_view.Source = "";
web_view.Url= "";

此方法仅适用于 ios；对于android和windows，这种方法没有效果。那么你能建议一种在android和windows中暂停视频的方法吗？

我的数据有两种格式：

  1. 单独的视频或音频链接。
  2. 具有视频链接的 HTML 数据。

当 webview 的源是单独的视频或音频 URL 时，以下代码适用于 android。当源是 HTML 数据时，此解决方案在 android 中不起作用。

string pausefunctionString = @"var videos = document.querySelectorAll('video');  
                        [].forEach.call(videos, function(video) { video.pause(); });
                        ";
web_view.Eval(pausefunctionString);

结论

  1. 视频或音频暂停不适用于两种数据格式的窗口（如上所述），需要一个解决方案。
  2. 对于 Android，当源是 HTML 数据时，视频没有暂停，需要解决这个问题。
  3. 我想我们可以忘记 ios 平台上的视频暂停。

我还附上了不同数据格式的更新文件。

标签： xamarin.formswebview

解决方案

您需要在自定义渲染器中调用 JS 代码

在自定义网页视图中

public Action<string> EvaluateJS;
public void OnEvaluate(string script)
{
    EvaluateJS(script);
}

在自定义渲染器中

protected override void OnElementChanged(ElementChangedEventArgs<MyWebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var config = new WKWebViewConfiguration();
                config.AllowsInlineMediaPlayback = true;

                wkWebView = new WKWebView(Frame, config);
                SetNativeControl(wkWebView);
            }

            if (e.NewElement != null)
            {
                Control.LoadRequest(new NSUrlRequest(new NSUrl(Element.Url)));

                Element.EvaluateJS +=  (script) =>
               {
                   wkWebView.EvaluateJavaScript(script, (result, error) =>
                   {
                    });
               };

            }
        }

用法

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

推荐阅读