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 and HTML5 <video>和http://code.google.com/p/html5webview/source/browse/trunk/HTML5WebView/src/org/itri/html5webview/HTML5WebView.java

Answer 2

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

要捕获视频信息网址您需要使用onLoadResource方法：

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

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

3 个答案: