在 WebView 中加载 YouTube 视频时，全屏选项不可用

Question

我在 Android 应用程序中使用 webview 工作了很多时间。但是这次我在将 YouTube 视频加载到 WebView 时遇到了奇怪的问题。

看，这是在 Chrome 浏览器中加载的 YouTube 视频的屏幕截图，其中包含全屏选项。

现在，下面是我在 webview 中加载相同视频的应用程序的屏幕截图。但它没有那个全屏选项。

您可以看到两个图像的变化。两个屏幕截图均来自同一设备。但看起来还是不一样。

我的 webView 加载代码是in this pasteboard。

更新

我也看到同样的问题是reported here。但不知道是否有可用的解决方案。

Answer 1

在您的 java 文件中进行以下更改：

view.setWebViewClient(new Browser());
view.setWebChromeClient(new MyWebClient());

---

在java文件中添加Browser类和MyWebClient这2个类

class Browser
        extends WebViewClient
{
    Browser() {}

    public boolean shouldOverrideUrlLoading(WebView paramWebView, String paramString)
    {
        paramWebView.loadUrl(paramString);
        return true;
    }
}

public class MyWebClient
        extends WebChromeClient
{
    private View mCustomView;
    private WebChromeClient.CustomViewCallback mCustomViewCallback;
    protected FrameLayout mFullscreenContainer;
    private int mOriginalOrientation;
    private int mOriginalSystemUiVisibility;

    public MyWebClient() {}

    public Bitmap getDefaultVideoPoster()
    {
        if (MainActivity.this == null) {
            return null;
        }
        return BitmapFactory.decodeResource(MainActivity.this.getApplicationContext().getResources(), 2130837573);
    }

    public void onHideCustomView()
    {
        ((FrameLayout)MainActivity.this.getWindow().getDecorView()).removeView(this.mCustomView);
        this.mCustomView = null;
        MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
        MainActivity.this.setRequestedOrientation(this.mOriginalOrientation);
        this.mCustomViewCallback.onCustomViewHidden();
        this.mCustomViewCallback = null;
    }

    public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback paramCustomViewCallback)
    {
        if (this.mCustomView != null)
        {
            onHideCustomView();
            return;
        }
        this.mCustomView = paramView;
        this.mOriginalSystemUiVisibility = MainActivity.this.getWindow().getDecorView().getSystemUiVisibility();
        this.mOriginalOrientation = MainActivity.this.getRequestedOrientation();
        this.mCustomViewCallback = paramCustomViewCallback;
        ((FrameLayout)MainActivity.this.getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1));
        MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(3846);
    }
}

Answer 2

iFrame 是一个选项，但你可以试试这个

Android 的 WebView 和 WebChromeClient 类扩展可以启用 完整的 HTML5 视频支持

VideoEnabledWebView

我还没有尝试过，但希望对你有所帮助。

Answer 3

如果我理解正确，您有一个包含第二个 iframe（youtube 的 iframe）的 iframe。 尝试将 allowfullscreen 属性添加到“父”iframe。

要获得完整的浏览器支持，它应该如下所示：

<iframe src="your_page_url" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"> </iframe>

Answer 4

Kotlin 上@Ameya Bonkinpelliwar 的答案

class WebChrome(activity: Activity) : WebChromeClient() {

    private val activityRef = WeakReference(activity)

    private var customView: View? = null
    private var customViewCallback: CustomViewCallback? = null

    private var originalOrientation = 0
    private var originalSystemUiVisibility = 0

    override fun onProgressChanged(view: WebView, progress: Int) {
        view.context.activityCallback<MainActivity> {
            onProgress(progress)
        }
    }

    override fun getDefaultVideoPoster(): Bitmap? {
        return activityRef.get()?.run {
            BitmapFactory.decodeResource(applicationContext.resources, 2130837573)
        }
    }

    override fun onHideCustomView() {
        activityRef.get()?.run {
            (window.decorView as ViewGroup).removeView(customView)
            customView = null
            window.decorView.systemUiVisibility = originalSystemUiVisibility
            requestedOrientation = originalOrientation
        }
        customViewCallback?.onCustomViewHidden()
        customViewCallback = null
    }

    override fun onShowCustomView(view: View?, viewCallback: CustomViewCallback?) {
        if (customView != null) {
            onHideCustomView()
            return
        }
        customView = view
        activityRef.get()?.run {
            originalSystemUiVisibility = window.decorView.systemUiVisibility
            originalOrientation = requestedOrientation
            customViewCallback = viewCallback
            (window.decorView as ViewGroup).addView(
                customView,
                ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
            )
            window.decorView.systemUiVisibility = 3846
        }
    }
}

Answer 5

//Add WebChromeClient to your webview 
//With navigation option and player controls overlapping handlled.

    class UriChromeClient extends WebChromeClient {
            private View mCustomView;
            private WebChromeClient.CustomViewCallback mCustomViewCallback;
            protected FrameLayout mFullscreenContainer;
            private int mOriginalOrientation;
            private int mOriginalSystemUiVisibility;

            @SuppressLint("SetJavaScriptEnabled")
            @Override
            public boolean onCreateWindow(WebView view, boolean isDialog,
                                          boolean isUserGesture, Message resultMsg) {
                mWebviewPop = new WebView(getApplicationContext());
                mWebviewPop.setVerticalScrollBarEnabled(false);
                mWebviewPop.setHorizontalScrollBarEnabled(false);
                mWebviewPop.setWebViewClient(new MyWebViewClient());
                mWebviewPop.getSettings().setSupportMultipleWindows(true);
                mWebviewPop.getSettings().setJavaScriptEnabled(true);
                mWebviewPop.getSettings().setUserAgentString(mWebviewPop.getSettings().getUserAgentString().replace("; wv", ""));
    //            mWebviewPop.getSettings().setUserAgentString(USER_AGENT);
                mWebviewPop.getSettings().setSaveFormData(true);
                mWebviewPop.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT));
                mContainer.addView(mWebviewPop);
                WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
                transport.setWebView(mWebviewPop);
                resultMsg.sendToTarget();

                return true;
            }

            @Override
            public void onCloseWindow(WebView window) {
                Log.d("onCloseWindow", "called");
            }

            //
            public Bitmap getDefaultVideoPoster() {
                if (mCustomView == null) {
                    return null;
                }
                return BitmapFactory.decodeResource(getApplicationContext().getResources(), 2130837573);
            }

            public void onHideCustomView() {
                ((FrameLayout) getWindow().getDecorView()).removeView(this.mCustomView);
                this.mCustomView = null;
                getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
                setRequestedOrientation(this.mOriginalOrientation);
                this.mCustomViewCallback.onCustomViewHidden();
                this.mCustomViewCallback = null;
            }

            public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback paramCustomViewCallback) {
                if (this.mCustomView != null) {
                    onHideCustomView();
                    return;
                }
                this.mCustomView = paramView;
                this.mCustomView.setBackgroundColor(Color.BLACK);
                this.mOriginalSystemUiVisibility = getWindow().getDecorView().getSystemUiVisibility();
                this.mOriginalOrientation = getRequestedOrientation();
                this.mCustomViewCallback = paramCustomViewCallback;
                ((FrameLayout) getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1));
                getWindow().getDecorView().setSystemUiVisibility(3846);

                this.mCustomView.setOnSystemUiVisibilityChangeListener(new View.OnSystemUiVisibilityChangeListener() {
                    @Override
                    public void onSystemUiVisibilityChange(int visibility) {
                        if ((visibility & View.SYSTEM_UI_FLAG_HIDE_NAVIGATION) == 0) {
                            updateControls(getNavigationBarHeight());
                        } else {
                            updateControls(0);
                        }

                    }
                });

            }

            void updateControls(int bottomMargin) {
                FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) this.mCustomView.getLayoutParams();
                params.bottomMargin = bottomMargin;
                this.mCustomView.setLayoutParams(params);
            }
        }

        int getNavigationBarHeight() {
            Resources resources = getResources();
            int resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android");
            if (resourceId > 0) {
                return resources.getDimensionPixelSize(resourceId);
            }
            return 0;
        }


        private void loadURL(WebView view, String url) {
            ConnectivityManager cm = (ConnectivityManager) getApplication().getSystemService(Context.CONNECTIVITY_SERVICE);
            NetworkInfo netInfo = cm.getActiveNetworkInfo();
            if (netInfo != null && netInfo.isConnected()) {
                view.setVisibility(View.VISIBLE);
                noNetworkText.setVisibility(View.GONE);
                view.loadUrl(url);

            } else {
                Log.d(TAG, "loadURL: no network");
                view.setVisibility(View.INVISIBLE);
                noNetworkText.setVisibility(View.VISIBLE);
            }
        }

    }