Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Full screen option not available when loading YouTube video in WebView

I have work so many time with the webview with in Android app. But this time I got strange issue with loading YouTube video in to WebView.

See, this is the screen shot of YouTube video loaded in Chrome browser, which have full screen option in it.

enter image description here

Now, below is the screen shot of my app in which I have loaded same video in webview. But it is not having that full screen option.

enter image description here

You can see the changes in both the images. Both the screen shots are taken from same device. But still it looks different.

My code for webView loading is in this pasteboard.

Update

I have also seen that the same issue is reported here. But don't know whether is there solution for that available or not.

like image 595
Shreyash Mahajan Avatar asked Mar 29 '16 04:03

Shreyash Mahajan


People also ask

Why can't I make YouTube videos full screen?

Sometimes a YouTube page will load incorrectly, causing graphical issues in the process. If this is the reason you're encountering a full-screen error, pressing the F5 key or clicking the "Refresh" button will reload the YouTube page and fix the problem.

How do I get the YouTube video to go full screen?

Go to the video you'd like to watch. At the bottom-right of the video player, click full screen .

How do I stop video playing on Android webView?

setBuiltInZoomControls(false); webView. getSettings().


4 Answers

Do following changes in your java file:

view.setWebViewClient(new Browser());
view.setWebChromeClient(new MyWebClient());

and add this 2 class that is class Browser and class MyWebClient in java file

class Browser
        extends WebViewClient
{
    Browser() {}

    public boolean shouldOverrideUrlLoading(WebView paramWebView, String paramString)
    {
        paramWebView.loadUrl(paramString);
        return true;
    }
}

public class MyWebClient
        extends WebChromeClient
{
    private View mCustomView;
    private WebChromeClient.CustomViewCallback mCustomViewCallback;
    protected FrameLayout mFullscreenContainer;
    private int mOriginalOrientation;
    private int mOriginalSystemUiVisibility;

    public MyWebClient() {}

    public Bitmap getDefaultVideoPoster()
    {
        if (MainActivity.this == null) {
            return null;
        }
        return BitmapFactory.decodeResource(MainActivity.this.getApplicationContext().getResources(), 2130837573);
    }

    public void onHideCustomView()
    {
        ((FrameLayout)MainActivity.this.getWindow().getDecorView()).removeView(this.mCustomView);
        this.mCustomView = null;
        MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(this.mOriginalSystemUiVisibility);
        MainActivity.this.setRequestedOrientation(this.mOriginalOrientation);
        this.mCustomViewCallback.onCustomViewHidden();
        this.mCustomViewCallback = null;
    }

    public void onShowCustomView(View paramView, WebChromeClient.CustomViewCallback paramCustomViewCallback)
    {
        if (this.mCustomView != null)
        {
            onHideCustomView();
            return;
        }
        this.mCustomView = paramView;
        this.mOriginalSystemUiVisibility = MainActivity.this.getWindow().getDecorView().getSystemUiVisibility();
        this.mOriginalOrientation = MainActivity.this.getRequestedOrientation();
        this.mCustomViewCallback = paramCustomViewCallback;
        ((FrameLayout)MainActivity.this.getWindow().getDecorView()).addView(this.mCustomView, new FrameLayout.LayoutParams(-1, -1));
        MainActivity.this.getWindow().getDecorView().setSystemUiVisibility(3846);
    }
}
like image 101
Ameya Bonkinpelliwar Avatar answered Oct 12 '22 13:10

Ameya Bonkinpelliwar


Answer of @Ameya Bonkinpelliwar on Kotlin

class WebChrome(activity: Activity) : WebChromeClient() {

    private val activityRef = WeakReference(activity)

    private var customView: View? = null
    private var customViewCallback: CustomViewCallback? = null

    private var originalOrientation = 0
    private var originalSystemUiVisibility = 0

    override fun onProgressChanged(view: WebView, progress: Int) {
        view.context.activityCallback<MainActivity> {
            onProgress(progress)
        }
    }

    override fun getDefaultVideoPoster(): Bitmap? {
        return activityRef.get()?.run {
            BitmapFactory.decodeResource(applicationContext.resources, 2130837573)
        }
    }

    override fun onHideCustomView() {
        activityRef.get()?.run {
            (window.decorView as ViewGroup).removeView(customView)
            customView = null
            window.decorView.systemUiVisibility = originalSystemUiVisibility
            requestedOrientation = originalOrientation
        }
        customViewCallback?.onCustomViewHidden()
        customViewCallback = null
    }

    override fun onShowCustomView(view: View?, viewCallback: CustomViewCallback?) {
        if (customView != null) {
            onHideCustomView()
            return
        }
        customView = view
        activityRef.get()?.run {
            originalSystemUiVisibility = window.decorView.systemUiVisibility
            originalOrientation = requestedOrientation
            customViewCallback = viewCallback
            (window.decorView as ViewGroup).addView(
                customView,
                ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT
                )
            )
            window.decorView.systemUiVisibility = 3846
        }
    }
}
like image 45
Vlad Avatar answered Oct 12 '22 14:10

Vlad


iFrame is an option but you can try this

Android's WebView and WebChromeClient class extensions that enable fully working HTML5 video support

VideoEnabledWebView

I have not try this yet but hope will help to you.

like image 8
M D Avatar answered Oct 12 '22 13:10

M D


If I understand correctly you have an iframe that contains a second iframe (the youtube one). Try adding the allowfullscreen attribute to the "parent" iframe.

For full browser support it should look like this:

<iframe src="your_page_url" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"> </iframe>
like image 3
Creative Learner Avatar answered Oct 12 '22 13:10

Creative Learner