android - 带有嵌入式 youtube 视频的 Android WebView，全屏按钮冻结视频

Question

我有一个加载 wordpress 博客的 android webview。一些博客文章包含 youtube 视频，我希望用户能够根据需要制作全屏。问题是 HTML5 全屏按钮在单击时什么都不做，而是冻结视图。有任何想法吗？

Answer 1

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.

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

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

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

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

Answer 2

如果在应用程序中直接显示 YouTube 视频并不重要，您可以在包含视频信息 URL 时启动外部 YouTube 应用程序。

要捕获视频信息 URL，您需要使用 owerrideonLoadResource方法：

new WebViewClient() {

    @Override
    public void onLoadResource(WebView view, String url) {

        if (url.startsWith("http://www.youtube.com/get_video_info?")) {
            try {
                String path = url.replace("http://www.youtube.com/get_video_info?", "");

                String[] parqamValuePairs = path.split("&");

                String videoId = null;

                for (String pair : parqamValuePairs) {
                    if (pair.startsWith("video_id")) {
                        videoId = pair.split("=")[1];
                        break;
                    }
                }

                if(videoId != null){
                    startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.youtube.com"))
                            .setData(Uri.parse("http://www.youtube.com/watch?v=" + videoId)));
                    needRefresh = true;

                    return;
                }
            } catch (Exception ex) {
            }
        } else {
            super.onLoadResource(view, url);
        }
    }
}

Answer 3

感谢@Mark Parnell 的回复，但他正在艰难地进行大量的 UI 更改，也许这种方式更干净、更容易理解：

单击全屏按钮时，chrome 客户端会为我们提供全屏视图，然后我们应该将其添加到我们的活动视图中：

在我们的活动中定义这个全局变量来保存全屏视图引用：

public class MyAmazingActivity extends AppCompatActivity {
    private View fullscreenView;
    //...
}

然后 web chrome 客户端将通知我们在onShowCustomView和onHideCustomView方法中显示和隐藏全屏视图：

WebChromeClient webChromeClient = new WebChromeClient() {

            private ViewGroup rootView;
            private WebChromeClient.CustomViewCallback customViewCallback;

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

                //Destroy full screen view if already exists
                if (fullscreenView != null) {
                    callback.onCustomViewHidden();
                    return;
                }

                //Layout params to fit fullscreen view in our activity
                ViewGroup.LayoutParams layoutParams = 
                        new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                                ViewGroup.LayoutParams.MATCH_PARENT);
                //Catch root of current activity to add fullscreen view
                rootView = (ViewGroup) WebViewBaseActivity.this.webView.getRootView();
                
                //Store full screen view, we need it to destroy it out of scope
                fullscreenView = view;

                customViewCallback = callback;
                rootView.addView(fullscreenView, layoutParams);
            }

            @Override
            public void onHideCustomView() {
                //Make sure fullscreen view exists
                if (fullscreenView != null) {
                    
                    //Remove fullscreen view from activity root view
                    rootView.removeView(fullscreenView);
                    fullscreenView = null;

                    //Tell browser we did remove fullscreen view
                    customViewCallback.onCustomViewHidden();
                }
            }

        };

最后在按下时删除全屏视图（用户期望这种行为）：

@Override
public void onBackPressed() {
    if (fullscreenView != null) {
        webChromeClient.onHideCustomView();
    }
}