Youtube Video Not Playing in Webview

YouTube Video not playing in WebView - Android

Add these lines before loading HTML content to your WebView.

wv.setWebChromeClient(new WebChromeClient() {
});

From the documentation:

In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient. For full screen support, implementations of onShowCustomView(View, WebChromeClient.CustomViewCallback) and onHideCustomView() are required, getVideoLoadingProgressView() is optional.

YouTube Video not playing in WebView

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

}   
}

Android WebView - Youtube videos not playing within the application

1. Go to Google Developer Console and select or create a new project.

2. On the left sidebar, select APIs under APIs & auth and turn the status ON for YouTube Data API v3.

3. On the left sidebar, select Credentials and Create new key under Public API access.

4. When popup comes asking you to choose platform, select Android Key.

5. Paste the SHA-1 key and your project’s package name separated by semicolon(;).

6. Click on create. Now you should see the API KEY on the dashboard.

download YouTubeAPI jar from here

https://developers.google.com/youtube/android/player/downloads/

Create a layout like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.youtube.player.YouTubePlayerView
    android:id="@+id/youtube_player"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:layout_centerInParent="true" />

  </RelativeLayout>

Your activity should look something like this

public class CustomYouTubePlayer extends YouTubeBaseActivity implements   YouTubePlayer.OnInitializedListener{

private String API_KEY="your key";
private String VIDEO_ID;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    /** attaching layout xml **/
    setContentView(R.layout.youtube_player);

    /** Initializing YouTube player view **/
    VIDEO_ID = getIntent().getExtras().getString(FinalVariables.YOUTUBE_ID);
    YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById(R.id.youtube_player);
    youTubePlayerView.initialize(API_KEY, this);
}

@Override
public void onInitializationSuccess(Provider provider, YouTubePlayer player, boolean wasRestored) {

    player.setShowFullscreenButton(false);
    /** add listeners to YouTubePlayer instance **/
    player.setPlayerStateChangeListener(playerStateChangeListener);
    player.setPlaybackEventListener(playbackEventListener);

    /** Start buffering **/
    if (!wasRestored) {
        player.loadVideo(VIDEO_ID);
    }
}
private YouTubePlayer.PlaybackEventListener playbackEventListener = new YouTubePlayer.PlaybackEventListener() {

    @Override
    public void onBuffering(boolean arg0) {
    }

    @Override
    public void onPaused() {
    }

    @Override
    public void onPlaying() {
    }

    @Override
    public void onSeekTo(int arg0) {
    }

    @Override
    public void onStopped() {
    }

};

 private YouTubePlayer.PlayerStateChangeListener playerStateChangeListener = new YouTubePlayer.PlayerStateChangeListener() {

    @Override
    public void onAdStarted() {
    }

    @Override
    public void onError(YouTubePlayer.ErrorReason arg0) {
    }

    @Override
    public void onLoaded(String arg0) {
    }

    @Override
    public void onLoading() {
    }

    @Override
    public void onVideoEnded() {
        finish();
    }

    @Override
    public void onVideoStarted() {
    }
};
} 

Just pass the video id and that's all simple as that..

Edit

if this is your YouTube link https://www.youtube.com/watch?v=rql_F8H3h9E
then your video_id=rql_F8H3h9E
Extract your video id from YouTube link and sent to this activity as extra variable.

Android: playing youtube video on Webview

try this

String frameVideo = "<html><body>Video From YouTube<br><iframe width=\"420\" height=\"315\" src=\"https://www.youtube.com/embed/47yJ2XCRLZs\" frameborder=\"0\" allowfullscreen></iframe></body></html>";

    WebView displayYoutubeVideo = (WebView) findViewById(R.id.mWebView);
    displayYoutubeVideo.setWebViewClient(new WebViewClient() {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }
    });
    WebSettings webSettings = displayYoutubeVideo.getSettings();
    webSettings.setJavaScriptEnabled(true);
    displayYoutubeVideo.loadData(frameVideo, "text/html", "utf-8");

also set in manifist file android:hardwareAccelerated="true"

<application
    android:allowBackup="true"
    android:hardwareAccelerated="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >

</application>

Android - WebView not playing YouTube videos

Using WebView to play YouTube videos would require extensive testing and debugging on different Android OS versions due to the difference in functionality and bugs between Android 2.x and 4.x.

A less bug-prone approach that gives you more control is to use YouTube Android Player API to embed a YouTube video into your own app, they have sample app so it shouldn't be too difficult if you follow their steps.

---

Related Topics