Pages

Friday 11 January 2013

Play YouTube video in WebView without launching new Intent


EDIT : Now you can use YouTube Android Player API to play YouTube video in app.


The API offers these benefits :
  • High-quality video playback supported on Android 2.2 (Froyo) or newer
  • Easy integration with your Android application (no WebView required)
  • Fullscreen and orientation change support
  • Integration with the Android YouTube app using a standard set of YouTube Intents
  • And more ..
For further information on this, please Click Here or Here

ORIGINAL POST


Here's the code to play YouTube videos in WebView using video url.
Video plays in appliction itself, not launching new Intent.

XML code file:

activity_video.xml
<LinearLayout 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:orientation="vertical"
    tools:context=".VideoActivity" >

    <Button
        android:id="@+id/btnPlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|top"
        android:layout_margin="5dp" />

    <WebView
        android:id="@+id/videoView"
        android:layout_width="fill_parent"
        android:layout_height="match_parent" />

</LinearLayout>


Java Code File:

VideoActivity.java

public class VideoActivity extends Activity {
public static final int USER_MOBILE = 0;
public static final int USER_DESKTOP = 1;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_video);
final WebView video = (WebView) findViewById(R.id.videoView);
Button btnPlay = (Button) findViewById(R.id.btnPlay);
btnPlay.setText("Play Video");

btnPlay.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
video.getSettings().setJavaScriptEnabled(true);
video.getSettings().setPluginState(WebSettings.PluginState.ON);
video.getSettings().setUserAgent(USER_MOBILE);
video.setWebChromeClient(new WebChromeClient() {
});

//youtube video url
////http://www.youtube.com/watch?v=WM5HccvYYQg

 final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = getHTML("WM5HccvYYQg");
video.loadDataWithBaseURL("", html, mimeType, encoding, "");
}
});
}


public String getHTML(String videoId) {

String html =
"<iframe class=\"youtube-player\" "
+ "style=\"border: 0; width: 100%; height: 95%;"
+ "padding:0px; margin:0px\" "
+ "id=\"ytplayer\" type=\"text/html\" "
+ "src=\"http://www.youtube.com/embed/" + videoId
+ "?fs=0\" frameborder=\"0\" " + "allowfullscreen autobuffer "
+ "controls onclick=\"this.play()\">\n" + "</iframe>\n";

/**
 * <iframe id="ytplayer" type="text/html" width="640" height="360"
 * src="https://www.youtube.com/embed/WM5HccvYYQg" frameborder="0"
 * allowfullscreen>
 **/

return html;
}

}
Manifest.xml file:
Add the line android:hardwareAccelerated="true" in <appliction> tag

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
...>
<application
        android:hardwareAccelerated="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
...
...
</application>
</manifest>

18 comments :

  1. thanks
    this is very clear and helpful

    ReplyDelete
    Replies
    1. my pleasure .. :)

      Delete
    2. Hey, R.Larki. Please check my updated post.

      Delete
  2. Kaushik - were you able to go fullscreen with this webview? I have my videos playing OK, but the fullscreen button does not work.

    ReplyDelete
    Replies
    1. No. Actually there are also some problems playing video with this approach in some devices. For full screen button and other functions like changing video quality, use Google youtube player API. I will update my post soon regarding that.

      Delete
    2. Hey, Dan. Please check my updated post.

      Delete
  3. Video is not playing in my app.only thumbnail is visible.
    when i clicked on play button application closes forcefully.

    ReplyDelete
    Replies
    1. Hey, Sonali. Please check my updated post. On some devices, playing video with WebView not working. But using YouTube Android Player API, you can play video on any devices having YouTube App .

      Delete
  4. Video is not playing... If there is Chrome then the video will play. If there is no Chrome browser then it will not.

    ReplyDelete
    Replies
    1. Hey, Shidhin T.S. Please check my updated post.

      Delete
  5. This comment has been removed by the author.

    ReplyDelete
  6. I have a playlist in youtube. How do i play in android using iframe code?? would you know that code?
    please share to us..

    ReplyDelete
    Replies
    1. Hi, Ganesh. You can use YouTubePlayer api for that. Please see the updated post. Also, YouTubePlayer class reference.
      https://developers.google.com/youtube/android/player/reference/com/google/android/youtube/player/YouTubePlayer#cuePlaylist(java.lang.String)

      Delete
  7. Having some error in videoactivity code

    ReplyDelete
    Replies
    1. Hi Kathik.
      Please check my updated post. You can use YouTubePlayer api from now on.

      Delete
  8. This comment has been removed by the author.

    ReplyDelete
  9. hey kaushik is that possible,not to refresh webview while going to another activity

    ReplyDelete
  10. Hey Kaushik, I'm having some issue with maximizing YTplayer from webview. for first time its rendering properly but if we try to minimize and miximize, only blank screen is rendering not the video..

    ReplyDelete