Webview 和 iFrame Video 全屏问题

问题描述

数周以来，我一直在寻找解决方案，同时将其放在我的待办事项中.

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

我有一个简单的 webview 如下

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

LoadDataWithBaseURL with https://

LoadDataWithBaseURL with https://

我也有 allowfullscreen 例如下面的 iframe

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

假设您有这种布局:

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

您可以继承 WebChromeClient 并定义您希望如何显示全屏"内容，在此示例中，我们将假设最外层的 LinearLayout 是我们想要显示的位置YouTube 视频，内部 LinearLayout 包含您希望在全屏视频播放时隐藏的所有 Activity 内容.

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 Video 全屏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！