Webview和iFrame视频全屏问题

Question

数周以来，我一直在寻找解决方案，同时将其保留在积压中。

我有一个简单的网络视图如下

WebView webView = FindViewById<WebView>(Resource.Id.webviewVideo);
webView.ClearCache(true);
webView.ClearHistory();                    
webView.SetWebChromeClient( new WebChromeClient { });
webView.Settings.JavaScriptEnabled = true;
webView.Settings.LoadWithOverviewMode = true;
webView.Settings.UseWideViewPort = true;                    
webView.LoadDataWithBaseURL("https://.", iFrameString, "text/html", "UTF-8", null);

我将iFrame传递给它，视频加载并播放正常，但全屏选项不可用。

我尝试过的解决方案

• 启用JavaScript

• 设置WebChromeClient

• LoadDataWithBaseURL与 https://

allowfullscreen例如，我也有以下iframe

<iframe width="560" height="315" src="https://www.youtube.com/embed/somevideoID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> 

有什么解决办法吗？

Answer 1

要在YouTube播放器上启用全屏按钮，WebChromeClient必须实施OnShowCustomView，OnHideCustomView因此您有责任为应用定义什么是“全屏”，因为不必由设备的屏幕尺寸来定义。

注意：您仍需要allowfullscreen在iFrame html源中使用HTML5标签

因此，假设您具有这种类型的布局：

LinearLayout (id = linearLayout)
   LinearLayout (id = contentLayout)
      Button
      WebView

您可以子类化WebChromeClient并定义您希望如何显示“全屏”内容，在此示例中，我们假设最外部LinearLayout是我们要显示YouTube视频的位置，内部LinearLayout包含您希望在全屏显示时隐藏的所有Activity内容屏幕视频正在播放。

WebChromeClient的实现：

public class FullScreenClient : WebChromeClient
{
    readonly FrameLayout.LayoutParams matchParentLayout = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent,
                                                                                                     ViewGroup.LayoutParams.MatchParent);
    readonly ViewGroup content;
    readonly ViewGroup parent;
    View customView;

    public FullScreenClient(ViewGroup parent, ViewGroup content)
    {
        this.parent = parent;
        this.content = content;
    }

    public override void OnShowCustomView(View view, ICustomViewCallback callback)
    {
        customView = view;
        view.LayoutParameters = matchParentLayout;
        parent.AddView(view);
        content.Visibility = ViewStates.Gone;
    }

    public override void OnHideCustomView()
    {
        content.Visibility = ViewStates.Visible;
        parent.RemoveView(customView);
        customView = null;
    }
}

SetWebChromeClient的实现：

webView.SetWebChromeClient(new FullScreenClient(linearLayout, contentLayout));

Answer 2

我知道答案已经被接受，但我花了一些时间来完成所提供的代码。我从来没有见过“readonly”关键字，“override”并不完全在它应该在的地方，看起来他是在回答LinearLayout并提供FrameLayout.LayoutParams。我希望这只是很好的伪代码哈哈。如果没有，请告诉我代码语法！

我在一个非常有用的YouTube 视频的评论部分发布了这个链接。如果您来自那里，则需要向 VideoAdapter 类构造函数添加 2 个参数。一种用于 LinearLayout（父级），一种用于 RecyclerView（内容）。

感谢@SushiHangover 提供的代码。您将在这方面帮助很多人！别忘了为他的回答点赞。

我的父布局是 LinearLayout （父布局），子布局是可以容纳多个视频的RecyclerView （内容） 。

// Custom Web View Class to allow for full screen
private class CustomWebView extends WebChromeClient {

    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                                                                           ViewGroup.LayoutParams.MATCH_PARENT);

    ViewGroup parent;
    ViewGroup content;
    View customView;

    public CustomWebView(ViewGroup parent, ViewGroup content){
        this.parent = parent;
        this.content = content;
    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);

        customView = view;
        view.setLayoutParams(layoutParams);
        parent.addView(view);
        content.setVisibility(View.GONE);
    }

    @Override
    public void onHideCustomView() {
        super.onHideCustomView();

        content.setVisibility(View.VISIBLE);
        parent.removeView(customView);
        customView = null;
    }

}