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

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?

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

2 个解决方案

#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.

首先,您需要创建一个自定义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);
        }
    }
}

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:

然后,只需在创建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.

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

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

我发现这些链接特别有用:WebView和HTML5

#2

You can start an external YouTube app when you will cath video info URLif it is not important to show YouTube video directly in application.

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

To catch video info URL You need to owerride onLoadResource method:

要捕获视频信息URL您需要使用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);
        }
    }
}

#1