Android WebView with an embedded youtube video, full screen button freezes video

Question

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?

Solution

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

Comments

[Andrew Weir]

In your code sample, what is mContentView in the context of a view for full screen? I imagine it's some kind of layout you've inflated, but how did you make it fullscreen. Can you post the XML for your mContentView object?

[Mark Parnell]

mContentView is the main activity view, which gets hidden when the video is made fullscreen. I'm not making the video fullscreen automatically though; the user does that (if they want to) when watching the video.

[anshul]

@MarkParnell Please give your comments here also stackoverflow.com/questions/18533678/…

[unknown]

@MarkParnell Thanks for your solution but I am getting error "Attempt to call getDuration without a valid media player" also there is error ( -38,0). Any idea?

[KiKo]

Nice code, but when i press on video it also start playing in webview, how can i Cancel that?

[Roman Black]

You can call WebView.reload(). But You can implement fullscreen video directly in app if You dont need to start foreign app.

[Someone Somewhere]

after exiting the activity, I see endless V/MediaPlayer(15998): isPlaying: 0 messages. Why is mediaplayer still active when the activity is exited ?

[Someone Somewhere]

another use case: pressing the power button when the video is playing in full screen. This really F's things up !

[Sachin Thampan]

How to handle orientation change?

[Alexey Strakh]

Great solution and at least I came a little bit closer to the required functionality (youtube video playback when no native app is installed). I have my OnShow/OnHide handlers called but I'm getting black while screen (even though the background is black). I can hear the video in full mode but couldn't see it. Any suggestions?

[madhuri H R]

I have used this code in fragment. in Onhideview is forces me to remove parent views child view. This will remove the toolbar as well. How to do this ? @MarkParnell