How to play a video in fullscreen mode and exit fullscreen mode in Android WebView?

Question

I know this is an old question and it was asked many times. But I tried many solutions they don't work with me.

I tested it in my Huawei 6P and Samsung S7, Nexus 5, the video(https://www.youtube-nocookie.com/embed/M68lNfqmTNk?rel=0&rel=0&showinfo=0) in WebView doesn't work as expected(it worked last year.). When I click the fullscreen button, "onShowCustomView" and "onHideCustomView" are invoked continuously. So I can see the video flashed(non-fullscreen -> full-screen -> non-fullscreen). Sometimes if I am lucky, the video goes full-screen mode, but if press full-screen button to exit fullscreen mode, the button doesn't work at all.

I wrote a demo in GitHub, hope anyone can help me. thanks.

Here is the code

Init Webview:

    mWebView = (WebView)findViewById(R.id.webview);

    mWebChromeClient = new MyWebChromeClient();
    mWebView.setWebChromeClient(mWebChromeClient);
    mWebView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            mWebView.loadUrl(url);
            return true;
        }
    });
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    webSettings.setUseWideViewPort(true);
    webSettings.setAllowFileAccess(true);
    webSettings.setSupportZoom(true);
    webSettings.setLoadWithOverviewMode(true);
    webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);

MyWebChromeClient:

 public 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) {
        Log.d("youtube", "onShowCustomView");
        // if a view already exists then immediately terminate the new one
        if (mCustomView != null) {
            callback.onCustomViewHidden();
            return;
        }
        mContentView = (ConstraintLayout) 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() {
        Log.d("youtube", "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);
        }
    }

}

I did set android:hardwareAccelerated in AndroidManifest.xml

android:hardwareAccelerated="true"

https://stackoverflow.com/questions/38842869/how-to-fullscreen-youtube-video-in-webview please refer this hope this help!!! — , Jul 21 '17 at 09:46
https://stackoverflow.com/questions/15796661/android-webview-app-wont-let-video-player-go-full-screen/16199649#16199649 have you seen this? — , Jul 21 '17 at 09:51
yes, I cloned the repo to my local it didn't work with me. Thanks @Kushan2 — DàChún, Jul 21 '17 at 09:56

score 2 · Accepted Answer · answered Jul 21 '17 at 11:04

2

To load youtube video in webview, you must use iframe instead, ex:

<iframe width="300" height=".." src="http://www.youtube.com/embed/M68lNfqmTNk" frameborder="0" allowfullscreen></iframe>

and load html text to the webview, something like this: <html><body> <iframe width="330" height="315" src="http://www.youtube.com/embed/M68lNfqmTNk" frameborder="0" allowfullscreen></iframe>....

answered Jul 21 '17 at 11:04

Yessine Mahdouani

1,225
12
24

Good point!. I added a local html file in my assets folder. Now seems the "fullscreen" button works. But sometimes the whole screen is black after fullscreen. I updated the demo code in github – DàChún Jul 21 '17 at 12:23
I checked your code, first t think you must delete the play video button, it's useless because after load the url to the webview the user has to click again to play the video, so I think it's better to load it in onCreate , and Try youtube api for playing youtube videos, it's better then using webview – Yessine Mahdouani Jul 21 '17 at 13:11

score 0 · Answer 2 · answered Jul 21 '17 at 09:54

0

i think there are many answers already predefined for this questions but i think you need to just check this answer once markparnelllink

in that link Mark defined solution in very detailed

answered Jul 21 '17 at 09:54

Jayman Jani

1,251
10
15

You can see, that my code of the Demo is from markparnelllink. Doesn't work with my youtube video. Thanks – DàChún Jul 21 '17 at 10:00

score -1 · Answer 3 · answered Jan 16 '18 at 13:30

-1

add this code in your webview. webView.getSettings().setUserAgentString("Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0)");

answered Jan 16 '18 at 13:30

Khun Htetz Naing

49
7

How to play a video in fullscreen mode and exit fullscreen mode in Android WebView?

3 Answers3