【问题标题】:Xamarin Forms: Pause the video or audio playing in webview programatticallyXamarin Forms:以编程方式暂停在 webview 中播放的视频或音频
【发布时间】:2020-10-04 11:24:20
【问题描述】:

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

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平台上的视频暂停。

我还附上了不同数据格式的更新file

【问题讨论】:

  • 我认为您用于透明背景的代码应该可以工作。这可能是由this answer中提到的HTML页面的正文引起的。
  • @JackHua-MSFT 我只有内容页面,没有 HTML 页面。我已经在自定义渲染器中添加了上面的代码,但是白色背景没有变化。
  • 您能否尝试在渲染器中再添加一行以查看是否有效:Control.ScrollView.BackgroundColor = UIColor.Clear;.
  • @Sreejith Sree 现在可以用了吗?
  • @LucasZhang-MSFT 我的视觉工作室有一些问题,无法加载和运行项目。我现在正在将 VS、Xcode 和 macOS 更新到最新版本。给您带来的不便敬请谅解,我会尽快更新状态。

标签: xamarin.forms webview


【解决方案1】:

需要在自定义渲染器中调用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);
}

【讨论】:

  • @Sreejith Sree 我检查了文件,问题是由标签 &lt;iframe&gt; 引起的。 Android和iOS平台支持不好。
猜你喜欢
  • 2019-08-28
  • 2023-03-20
  • 2020-12-08
  • 1970-01-01
  • 2018-05-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-10-03
相关资源
最近更新 更多