带有嵌入式 YouTube 视频的 Android WebView，全屏按钮冻结视频 [英] Android WebView with an embedded youtube video, full screen button freezes video

问题描述

我有一个加载 wordpress 博客的 android webview.一些博客文章包含 youtube 视频，我希望用户能够根据需要全屏显示.问题是 HTML5 全屏按钮在单击时什么也不做，但会冻结视图.有什么想法吗?

I have an android webview that loads a wordpress blog. Some blog posts contain youtube videos which I would like the user to be able to make full screen if they wish. The problem is the HTML5 full screen button does nothing when clicked but freeze up the view. Any ideas?

推荐答案

这是我在过去一天左右的时间里一直在纠结的事情.基于来自网络的各种代码，我设法让它工作.

This is something I've spent the last day or so tearing my hair out over. Based on various bits of code from around the web I've managed to get it working.

首先，您需要创建一个自定义的WebChromeClient 类，该类实现了onShowCustomView 和onHideCustomView 方法.

First, you need to create a custom WebChromeClient class, which implements the onShowCustomView and onHideCustomView methods.

private class MyWebChromeClient extends WebChromeClient {
    FrameLayout.LayoutParams LayoutParameters = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
            FrameLayout.LayoutParams.MATCH_PARENT);

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        // if a view already exists then immediately terminate the new one
        if (mCustomView != null) {
            callback.onCustomViewHidden();
            return;
        }
        mContentView = (RelativeLayout) findViewById(R.id.activity_main);
        mContentView.setVisibility(View.GONE);
        mCustomViewContainer = new FrameLayout(MainActivity.this);
        mCustomViewContainer.setLayoutParams(LayoutParameters);
        mCustomViewContainer.setBackgroundResource(android.R.color.black);
        view.setLayoutParams(LayoutParameters);
        mCustomViewContainer.addView(view);
        mCustomView = view;
        mCustomViewCallback = callback;
        mCustomViewContainer.setVisibility(View.VISIBLE);
        setContentView(mCustomViewContainer);
    }

    @Override
    public void onHideCustomView() {
        if (mCustomView == null) {
            return;
        } else {
            // Hide the custom view.  
            mCustomView.setVisibility(View.GONE);
            // Remove the custom view from its container.  
            mCustomViewContainer.removeView(mCustomView);
            mCustomView = null;
            mCustomViewContainer.setVisibility(View.GONE);
            mCustomViewCallback.onCustomViewHidden();
            // Show the content view.  
            mContentView.setVisibility(View.VISIBLE);
            setContentView(mContentView);
        }
    }
}

基本上，这里发生的事情是当全屏按钮被按下时，我们正在创建一个新视图来保存视频并隐藏主视图.然后当全屏关闭时，我们做相反的事情 - 摆脱新视图并显示原始视图.

Basically, what is happening here is when the full screen button gets pressed, we're creating a new view to hold the video and hiding the main view. And then when full screen is closed, we do the opposite - get rid of the new view and display the original view.

您还需要将所有这些属性添加到您的活动类中:

You'll need to also add all those properties to your activity class:

private MyWebChromeClient mWebChromeClient = null;
private View mCustomView;
private RelativeLayout mContentView;
private FrameLayout mCustomViewContainer;
private WebChromeClient.CustomViewCallback mCustomViewCallback;

并且您可能希望在按下后退按钮时关闭全屏视频:

And you probably want to make it close the fullscreen video when the back button is pressed:

@Override
public void onBackPressed() {
    if (mCustomViewContainer != null)
        mWebChromeClient.onHideCustomView();
    else if (myWebView.canGoBack())
        myWebView.goBack();
    else
        super.onBackPressed();
}

那么这只是在创建 webview 时使用新类的问题:

Then it's just a matter of using your new class when you create your webview:

myWebView = (WebView) findViewById(R.id.webView1);
mWebChromeClient = new WMWebChromeClient();
myWebView.setWebChromeClient(mWebChromeClient);

这在 Android 4.x 上对我有用.不确定早期版本，因为我的应用没有针对它们.

This works for me on Android 4.x. Not sure about earlier versions as my app isn't targeting them.

我发现这些链接特别有用:WebView 和 HTML5 和 http://code.google.com/p/html5webview/source/browse/trunk/HTML5WebView/src/org/itri/html5webview/HTML5WebView.java

I found these links particularly useful: WebView and HTML5 <video> and http://code.google.com/p/html5webview/source/browse/trunk/HTML5WebView/src/org/itri/html5webview/HTML5WebView.java

这篇关于带有嵌入式 YouTube 视频的 Android WebView，全屏按钮冻结视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！