带有嵌入式YouTube视频的Android WebView,全屏按钮冻结视频

Question

我有一个Android webview加载一个wordpress博客.一些博客文章包含youtube视频,我希望用户可以根据需要全屏显示.问题是HTML5全屏按钮在单击时不执行任何操作但冻结视图.有任何想法吗？

Answer 1

这是我在最后一天左右撕掉头发的事情.根据网络上的各种代码,我设法让它运作起来.

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

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

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

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

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

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

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

然后,只需在创建webview时使用新课程即可:

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

这适用于Android 4.x. 不确定早期版本,因为我的应用没有针对他们.

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