机器人的WebView与嵌入式YouTube视频，全屏按钮的瞬间视频 [英] Android WebView with an embedded youtube video, full screen button freezes video

问题描述

我有一个机器人的WebView加载一个字preSS博客。有些博客帖子中包含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?

推荐答案

这是我已经花了一天左右的撕裂我的头发了。根据来自网络的各个位code我已经成功地得到它的工作。

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

基本上，这里发生的一切是当全屏按钮获得pressed，我们正在创造一个新的视图来保存录像和隐藏的主视图。然后当全屏幕关闭时，我们却反其道而行之 - 摆脱新视图，并显示原始视图

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;

和你可能希望把它关闭全屏视频时后退按钮是pressed：

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＆LT;视频＆GT; 和<一href="http://$c$c.google.com/p/html5webview/source/browse/trunk/HTML5WebView/src/org/itri/html5webview/HTML5WebView.java">http://$c$c.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

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