android - YouTube Video not playing in WebView

Question

YouTube Video not playing in WebView.

It my first app ,I Want to do a webview. When I open YouTube the video not playing, is loading but not playing. Is loading all the time. Thank you so much for helping.

Java:

public class MainActivity extends Activity {

    private WebView mWebView;  

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl("http://www.google.com");
        mWebView.setWebViewClient(new HelloWebViewClient());

    }

private class HelloWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView webview, String url)
        {
        webview.loadUrl(url);
        return true;
    }}

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack())
        {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);

    }   }

Xml:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

Answer 1

Seems like duplicate of play youtube video in WebView and YouTube Video not playing in WebView - Android

To make it work via WebView, I used the following two steps (version 4.2.2/Nexus 4):

1. On shouldOverrideUrlLoading I added webview.setWebChromeClient(new WebChromeClient());

2. In AndroidManifest.xml for activity tag I added android:hardwareAccelerated="true"

AndroidManifest.xml should also contain Internet permission.

While exact steps with playing video via WebView can be specific to device and Android version, there are also other alternatives to WebView, like VideoView or using Youtube Android Player API.

EDIT1

As for pause and full screen, this is actually a second link I mentioned in the beginning. To make it easier, I am posting code that worked on my Nexus.

1. In activity_main.xml

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
   
   <FrameLayout
             android:id="@+id/fullscreen_custom_content"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:background="#FF000000"/>
   
   <LinearLayout 
             android:id="@+id/linearlayout"
             android:layout_width="fill_parent" 
             android:layout_height="fill_parent"> 
   
        <WebView
              android:id="@+id/webView"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent" />
   
   </LinearLayout>
   </RelativeLayout>
   

2. In MainActivity class:

   public class MainActivity extends Activity {
   
   private WebView mWebView;  
   private LinearLayout mContentView;
   private FrameLayout mCustomViewContainer;
   private WebChromeClient.CustomViewCallback mCustomViewCallback;
   FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
           ViewGroup.LayoutParams.WRAP_CONTENT,
           ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER);
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   
       mContentView = (LinearLayout) findViewById(R.id.linearlayout);
       mWebView = (WebView) findViewById(R.id.webView);
       mCustomViewContainer = (FrameLayout) findViewById(R.id.fullscreen_custom_content);
   
       WebSettings webSettings = mWebView.getSettings();
       webSettings.setPluginState(WebSettings.PluginState.ON);
       webSettings.setJavaScriptEnabled(true);
       webSettings.setUseWideViewPort(true);
       webSettings.setLoadWithOverviewMode(true);
   
       mWebView.loadUrl("http://www.google.com");
       mWebView.setWebViewClient(new HelloWebViewClient());
   
   }
   
   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
       // Inflate the menu; this adds items to the action bar if it is present.
       getMenuInflater().inflate(R.menu.main, menu);
       return true;
   }
   
   
   
   private class HelloWebViewClient extends WebViewClient  {
       @Override
       public boolean shouldOverrideUrlLoading(WebView webview, String url)
       {
           webview.setWebChromeClient(new WebChromeClient() {
   
               private View mCustomView;
   
                @Override
               public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
               {
                   // if a view already exists then immediately terminate the new one
                   if (mCustomView != null)
                   {
                       callback.onCustomViewHidden();
                       return;
                   }
   
                   // Add the custom view to its container.
                   mCustomViewContainer.addView(view, COVER_SCREEN_GRAVITY_CENTER);
                   mCustomView = view;
                   mCustomViewCallback = callback;
   
                   // hide main browser view
                   mContentView.setVisibility(View.GONE);
   
                   // Finally show the custom view container.
                   mCustomViewContainer.setVisibility(View.VISIBLE);
                   mCustomViewContainer.bringToFront();
               }
   
           }); 
   
         webview.loadUrl(url);
   
         return true;
       }
   }
   
   @Override
   public boolean onKeyDown(int keyCode, KeyEvent event)
   {
       if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack())
       {
           mWebView.goBack();
           return true;
       }
       return super.onKeyDown(keyCode, event);
   
   } 
   }
   

EDIT2 - adding back button support

public class MainActivity extends Activity {

private WebView mWebView;  
private LinearLayout mContentView;
private FrameLayout mCustomViewContainer;
private View mCustomView;
private WebChromeClient.CustomViewCallback mCustomViewCallback;
FrameLayout.LayoutParams COVER_SCREEN_GRAVITY_CENTER = new FrameLayout.LayoutParams(
        ViewGroup.LayoutParams.WRAP_CONTENT,
        ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER);

private WebChromeClient mWebChromeClient;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mContentView = (LinearLayout) findViewById(R.id.linearlayout);
    mWebView = (WebView) findViewById(R.id.webView);
    mCustomViewContainer = (FrameLayout) findViewById(R.id.fullscreen_custom_content);

    mWebChromeClient = new WebChromeClient() {


         @Override
        public void onShowCustomView(View view, WebChromeClient.CustomViewCallback callback)
        {
            // if a view already exists then immediately terminate the new one
            if (mCustomView != null)
            {
                callback.onCustomViewHidden();
                return;
            }

            // Add the custom view to its container.
            mCustomViewContainer.addView(view, COVER_SCREEN_GRAVITY_CENTER);
            mCustomView = view;
            mCustomViewCallback = callback;

            // hide main browser view
            mContentView.setVisibility(View.GONE);

            // Finally show the custom view container.
            mCustomViewContainer.setVisibility(View.VISIBLE);
            mCustomViewContainer.bringToFront();
        }

         @Override
         public void onHideCustomView()
         {
             if (mCustomView == null)
                 return;

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

    WebSettings webSettings = mWebView.getSettings();
    webSettings.setPluginState(WebSettings.PluginState.ON);
    webSettings.setJavaScriptEnabled(true);
    webSettings.setUseWideViewPort(true);
    webSettings.setLoadWithOverviewMode(true);

    mWebView.loadUrl("http://www.google.com");
    mWebView.setWebViewClient(new HelloWebViewClient());

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}



private class HelloWebViewClient extends WebViewClient  {

    @Override
    public boolean shouldOverrideUrlLoading(WebView webview, String url)
    {
        webview.setWebChromeClient(mWebChromeClient);   
        webview.loadUrl(url);

      return true;
    }
}

@Override
protected void onStop() {

    super.onStop();
    if (mCustomView != null)
    {
        if (mCustomViewCallback != null)
            mCustomViewCallback.onCustomViewHidden();
        mCustomView = null;
    }

}

@Override
public void onBackPressed() {

    super.onBackPressed();
     if (mCustomView != null)
     {
         mWebChromeClient.onHideCustomView();
     } else
     {
         finish();
     }
}

@Override
public boolean onKeyDown(int keyCode, KeyEvent event)
{
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack())
    {
        mWebView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);

}   
}