CODEWITHSUNDEEP
androidyoutube
Chandu
Chandu

Reputation: 1059

How to display thumbnail of YouTube Videos in Android

I writing an app where i want to display a list of YouTube videos. But I want the list to display the video title with some other info but also show a thumbnail of the video like it does when we go www.youtube.com

Can someone help me please on How to display the thumbnail for a video URL?

Upvotes: 22

Views: 17405

Answers (8)

Vivek Thummar
Vivek Thummar

Reputation: 413

I'm quite late for this Answer, but in case anyone needs help this can be helpful, let's get started:

from the answer of Shailesh and Abhishek, i have created new answer which can be helpful for youtube url's when you have these three kind of urls(all three videos are same just url format is different):

  1. https://youtu.be/Fs8fsrngI3Q
  2. http://www.youtube.com/watch?v=Fs8fsrngI3Q&feature=youtu.be
  3. https://www.youtube.com/watch?v=Fs8fsrngI3Q&ab_channel=SoftwareTestingAndAutomation

and you can use given method to get thumbnail of video:

public static String extractYoutubeId(String url) {
    String id = "";
    try {
        if (url.contains("youtu.be/")) {
            return url.substring(url.lastIndexOf("/") + 1);
        }

        String query = new URL(url).getQuery();
        if (query == null) return "";

        String[] param = query.split("&");
        for (String row : param) {
            String[] param1 = row.split("=");
            if (param1[0].equals("v")) {
                id = param1[1];
            }
        }
    } catch (MalformedURLException e) {
        e.printStackTrace();
    }
    return id;
}

Use this method like this:

String videoId = extractYoutubeId(videoUrl);
videoThumbUrl = "https://img.youtube.com/vi/" + videoId + "/0.jpg";

Upvotes: 0

mdsabir shaik
mdsabir shaik

Reputation: 141

if you want high quality thumbnail but not available for all video

Width | Height | URL
------|--------|----
640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd1.jpg
640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd2.jpg
640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sd3.jpg
640   | 480    | https://i.ytimg.com/vi/<VIDEO ID>/sddefault.jpg
1280  | 720    | https://i.ytimg.com/vi/<VIDEO ID>/hq720.jpg
1920  | 1080   | https://i.ytimg.com/vi/<VIDEO ID>/maxresdefault.jpg

if you want thumbnail that available for all video (relatively low quality)

Width | Height | URL
------|--------|----
120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/1.jpg
120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/2.jpg
120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/3.jpg
120   | 90     | https://i.ytimg.com/vi/<VIDEO ID>/default.jpg
320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq1.jpg
320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq2.jpg
320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mq3.jpg
320   | 180    | https://i.ytimg.com/vi/<VIDEO ID>/mqdefault.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/0.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq1.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq2.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hq3.jpg
480   | 360    | https://i.ytimg.com/vi/<VIDEO ID>/hqdefault.jpg

So Maximum quality thumbnail that available for all video is 480x360.

you can use link :https://i.ytimg.com/vi/<VIDEO ID>/0.jpg

String videoId = IfXNjuoqt0Q;
String thumnailLink = "https://i.ytimg.com/vi/"+videoId+"/0.jpg";

enter image description here

https://i.ytimg.com/vi/IfXNjuoqt0Q/0.jpg

To load image in Android

// Picasso        
Picasso.with(context)
       .load("https://i.ytimg.com/vi/IfXNjuoqt0Q/0.jpg")
       .into(imageView);

// Glide
Glide.with(this)
     .load("https://i.ytimg.com/vi/IfXNjuoqt0Q/0.jpg")
     .into(imageView);

--------Upto that already answer above------

If you want to remove black-bar from thumbnail 480x360 (maximum quality image that available for all video in youtube),but problem its come with black-bar


import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.Log;
import android.widget.ImageView;

import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;

public class ThumbnailHandler {

    public static Bitmap RemoveBlackBar(Bitmap bitmap){

        if (bitmap.getWidth() == 480 && bitmap.getHeight() == 360 ){

            int[] pixels = new int[bitmap.getWidth() * bitmap.getHeight()];
            int[] pixels_out = new int[bitmap.getWidth() * bitmap.getHeight()];

            // get pixel array from source
            bitmap.getPixels(pixels, 0, bitmap.getWidth(), 0, 0, bitmap.getWidth(), bitmap.getHeight());

            for (int y=0; y<270; y++){

                for (int x=0; x < bitmap.getWidth() ; x++){
                    pixels_out [y * bitmap.getWidth() + x] = pixels [(y+45) * bitmap.getWidth() + x];
                }
            }

            Bitmap bmOut = Bitmap.createBitmap(bitmap.getWidth(), 270, bitmap.getConfig());
            bmOut.setPixels(pixels_out, 0, bitmap.getWidth(), 0, 0, bitmap.getWidth(), 270);


            return bmOut;
        }else {
            return bitmap;
        }
    }

    public static Bitmap getBitmapFromURL(String src) {
        try {
            URL url = new URL(src);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            Bitmap myBitmap = BitmapFactory.decodeStream(input);
            return myBitmap;
        } catch (Exception e) {
            Log.e("shabir", "err: "+e );
            e.printStackTrace();
            return null;
        }
    }

    public static void getYtThumbnail_480_270(String url,YtThumbnailDownloadListener listener){
        new Thread(new Runnable() {
            @Override
            public void run() {
                Bitmap bitmap = getBitmapFromURL(url);
                bitmap = RemoveBlackBar(bitmap);
                listener.onThumbnailDownloaded(bitmap);
            }
        }).start();
    }

    public static void getYtThumbnail_480_270(String url, ImageView target, Activity activity){
        new Thread(new Runnable() {
            @Override
            public void run() {
                Bitmap bitmap = getBitmapFromURL(url);
                Bitmap finalBitmap = RemoveBlackBar(bitmap);
                activity.runOnUiThread(() -> {

                    target.setImageBitmap(finalBitmap);

                });
            }
        }).start();
    }

    public interface YtThumbnailDownloadListener{
        void onThumbnailDownloaded(Bitmap bitmap);
    }
}

copy above class in to your project

Above class convert 480x360 Thumbnail to 480x270 to remove black bar,

To load image in Android


// url
url = "https://i.ytimg.com/vi/IfXNjuoqt0Q/0.jpg";


// call to load thumbnail in Image view        
ThumbnailHandler.getYtThumbnail_480_270(url,
                                        imageView,
                                        MainActivity.this);

// call to download thumbnail in bitmap format
ThumbnailHandler.getYtThumbnail_480_270(url, new ThumbnailHandler.YtThumbnailDownloadListener() {
                    @Override
                    public void onThumbnailDownloaded(Bitmap bitmap) {
                        // Use thumbnail bitmap
                    }
                });

enter image description here

Maximum quality thumbnail (480x270), available for all video , without black bar

Upvotes: 0

OhhhThatVarun
OhhhThatVarun

Reputation: 4320

All of the above answers are doing string manipulation which is not needed. You can get the if the id very easily using Uri

Kotlin

val videoId = Uri.parse("https://www.youtube.com/watch?v=dQw4w9WgXcQ").getQueryParameter("v")
val thumbnailUri = Uri.parse("https://img.youtube.com/vi/${videoId}/0.jpg")
Glide.with(this).load(thumbnailUri).into(imageView)

Java

String videoId = Uri.parse("https://www.youtube.com/watch?v=dQw4w9WgXcQ").getQueryParameter("v");
Uri thumbnailUri = Uri.parse("https://img.youtube.com/vi/${videoId}/0.jpg");
Glide.with(this).load(thumbnailUri).into(imageView);

Upvotes: 1

dzboot02
dzboot02

Reputation: 2979

This question is old, but it is still coming in the top Google's search answers, so this us how I did it with the Android YouTube API.

YouTubeThumbnailView thumbnail = findViewById(R.id.thumbnail);
thumbnail.initialize(YOUTUBE_API_KEY, new YouTubeThumbnailView.OnInitializedListener() {

    @Override
    public void onInitializationSuccess(YouTubeThumbnailView youTubeThumbnailView, 
                                        YouTubeThumbnailLoader youTubeThumbnailLoader) {
        youTubeThumbnailLoader.setVideo(youtubeID);
        youTubeThumbnailLoader.setOnThumbnailLoadedListener(new YouTubeThumbnailLoader.OnThumbnailLoadedListener() {

            @Override
            public void onThumbnailLoaded(YouTubeThumbnailView youTubeThumbnailView, String s) {
                //need to release the loader!!!
                youTubeThumbnailLoader.release();
            }

            @Override
            public void onThumbnailError(YouTubeThumbnailView youTubeThumbnailView, 
                                         YouTubeThumbnailLoader.ErrorReason errorReason) {
                //need to release the loader!!!
                youTubeThumbnailLoader.release();
            }
        });
     }

     @Override
     public void onInitializationFailure(YouTubeThumbnailView youTubeThumbnailView, 
                                    YouTubeInitializationResult youTubeInitializationResult) {
     //handle error here
     }
});

YOUTUBE_API_KEY get your api key in here

youtubeID You need to use the video's ID not full URL.

Documentation here.

Upvotes: 2

GS Nayma
GS Nayma

Reputation: 1835

If you have URL of Youtube video. Use below code to get medium / high quality thumbnail URL

        String url = "https://www.youtube.com/watch?v=tResEeK6P5I"
        String videoId = url.split("v=")[1]; //you will get this video id "tResEeK6P5I"

        String thumbnailMq = "http://img.youtube.com/vi/"+videoId+/mqdefault.jpg //medium quality thumbnail

        String thumbnailHq = "http://img.youtube.com/vi/"+videoId+/hqdefault.jpg //high quality thumbnail

        //your final urls will be like 
        http://img.youtube.com/vi/tResEeK6P5I/mqdefault.jpg
        http://img.youtube.com/vi/tResEeK6P5I/hqdefault.jpg

Upvotes: 15

user3922209
user3922209

Reputation: 29

Link to download Glide jar file http://grepcode.com/snapshot/repo1.maven.org/maven2/com.github.bumptech.glide/glide/3.6.0

String url = "https://img.youtube.com/vi/"+videoURL.split("\\=")[1]+"/0.jpg";
Glide.with(this).load(url).into(imageView);

Upvotes: 3

Pratik Butani
Pratik Butani

Reputation: 62429

With the Combination of Two Accepted Answer

How to make YouTube video thumbnails in android?

and

How to get video thumbnail of youtube video in android list in android?

Finally You just have to play with ID of YOUTUBE URL only.

I found one PHP Answer for same question in that they have described like:

Each YouTube video has 4 generated images. They are predictably formatted as follows:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

The first one in the list is a full size image and others are thumbnail images. The default thumbnail image (ie. one of 1.jpg, 2.jpg, 3.jpg) is:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

For the high quality version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

There is also a medium quality version of the thumbnail, using a url similar to the HQ:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

For the standard definition version of the thumbnail, use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

For the maximum resolution version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

All of the above urls are available over https too. Just change http to https in any of the above urls.

Additionally, the slightly shorter hostname i3.ytimg.com works in place of img.youtube.com in the example urls above.

Example:

I have one URL https://www.youtube.com/watch?v=-OKrloDzGpU

Now I will just take ID from URL i.e.: -OKrloDzGpU

Medium Image: http://img.youtube.com/vi/-OKrloDzGpU/mqdefault.jpg

enter image description here

HD Image: http://img.youtube.com/vi/-OKrloDzGpU/hqdefault.jpg

enter image description here

Load Images in Android using Glide or Picasso:

// Picasso        
Picasso.with(context)
       .load("http://img.youtube.com/vi/-OKrloDzGpU/mqdefault.jpg")
       .into(imageView);

// Glide
Glide.with(this)
     .load("http://img.youtube.com/vi/-OKrloDzGpU/mqdefault.jpg")
     .into(imageView);

Thank you. Hope it will helps you all.

Upvotes: 47

Peter Knego
Peter Knego

Reputation: 80340

Try this:

  1. Parse video ID from the URL: this is the 'v' parameter in URL. I.e. 'xAiiwSXVRiw' in http://www.youtube.com/watch?v=xAiiwSXVRiw

  2. Get the video metadata via Youtube Gdata URL: http://gdata.youtube.com/feeds/api/videos/xAiiwSXVRiw

  3. Parse the XML that you get back and look for <media:thumbnail url='..'>. The 'url' attribute contains to the thumbnail url.

Upvotes: 8

Related Questions