Webview和iFrame视频全屏问题 [英] Webview and iFrame Video full screen issue

问题描述

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

I have been looking for a solution to this for weeks while keep putting it on my backlog.

我有一个简单的网页视图，如下所示

I have a simple webview as following

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传递给它，视频加载并播放正常，但全屏选项不可用.

I am passing iFrame to it, the video loads and plays ok but the fullscreen option is not available.

我尝试过的解决方案

• 启用JavaScript

• Enable JavaScript

设置WebChromeClient

Set WebChromeClient

带有https://

例如以下iframe，我也有allowfullscreen

I also have allowfullscreen for example the following iframe

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

有什么解决办法吗?

推荐答案

要在YouTube播放器上启用全屏按钮，WebChromeClient必须实现OnShowCustomView和OnHideCustomView，因此定义它是您的责任您的应用程序的全屏"是什么，因为不必由设备的屏幕尺寸来定义.

To enable the full screen button on the YouTube player, the WebChromeClient has to implement OnShowCustomView and OnHideCustomView and thus it it your responsibility to define what is "full screen" for your app as it does not have to be defined by the device's screen size.

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

Note: You still need the HTML5 tag of allowfullscreen in your iFrame html source

因此，假设您具有这种布局:

So lets assume you have this type of layout:

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

您可以将WebChromeClient子类化，并定义希望显示全屏"内容的方式，在本示例中，我们假设最外面的LinearLayout是我们要显示YouTube视频的位置，内部的LinearLayout全屏视频播放时您希望隐藏的所有活动内容.

You can subclass WebChromeClient and define how you wish to display "full screen" content, in this example we will assume the most outer LinearLayout is where we want to display the YouTube video, the inner LinearLayout contains all the Activity's content that you wish to hide while the full screen video is playing.

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

这篇关于Webview和iFrame视频全屏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！