How to get a YouTube video screenshot image (thumbnail)?

Go down

In progress How to get a YouTube video screenshot image (thumbnail)?

Post by Paulostge on Wed Nov 19, 2014 7:59 pm

Hello, I would like your help please

I have created a code in which you are taking the first picture of the messages and displays the topics_blog_box, for example see here

http://www.thegreeksenergy.com/f40-forum

I'd like the same code to add to displays the images from the video of Youtube after several attempts do not succeed.

Code:

        $(".blog_message").each(function () {
            if ($(this).find("img").length) {
                img_logsee = "";
                $(this).find("img").each(function () {
                    if ($(this).attr("src").search("smiles") == -1) {
                        img_logsee = $(this).attr("src");
                        return false
                    } else {
                        if (img_logsee == "") {
                            img_logsee = "http://i17.servimg.com/u/f17/17/06/15/51/no_ima10.jpg"
                        }
                    }
                })
            } else {
                img_logsee = "http://i17.servimg.com/u/f17/17/06/15/51/no_ima10.jpg"
            }
            $(this).text($(this).text());
            $('<img src="' + img_logsee + '" class="img_logsee" />').prependTo(this)
        });

Thank you!
avatar
Paulostge
Forumember

Male Posts : 115
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Ange Tuteur on Wed Nov 19, 2014 10:21 pm

Hello Paulostge,

The problem is that there is no image element in the youtube video. It is an embedded element, so you would need to get the first embed tag. For example :
Code:
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/WREyAicJXkM" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit" height="350" width="425">

Say we want to grab the source of the first video from the first post, we could write this :
Code:
$(function() {
  console.log($('.post:first embed:first').attr('src'));
});
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Paulostge on Thu Nov 20, 2014 1:10 am

This way I know him , and thank you for your answers...

I would like a video where the matter comes into picture as for example is the picture here

http://www.thegreeksenergy.com/f40-forum

Look here for example

http://jsfiddle.net/9jgQU/


Also I would like to work with

Code:
[youtube]link[/youtube]

...and not with

Code:
<iframe></iframe>
avatar
Paulostge
Forumember

Male Posts : 115
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Ange Tuteur on Thu Nov 20, 2014 1:21 am

ooh that is interesting ! Very Happy

You could do this :
Code:
'http://img.youtube.com/vi/'+$('.post:first embed:first').attr('src').split('/')[4]+'/mqdefault.jpg'

With :
Code:
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://www.youtube.com/v/WREyAicJXkM" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash" wmode="transparent" quality="high" scale="exactfit" height="350" width="425">

$('.post:first embed:first').attr('src').split('/')[4] = WREyAicJXkM
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Paulostge on Thu Nov 20, 2014 10:25 pm

Thank you for your time but does not help
avatar
Paulostge
Forumember

Male Posts : 115
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Ange Tuteur on Thu Nov 20, 2014 10:51 pm

If you're loading the data from the topic you could do something like this :
Code:
$(function() {
  $('a.mytitle').each(function() {
    $(this).parent().find('#container').load($(this).attr('href') + ' .post:first embed:first', function() {
      $(this).find('embed').before('<img src="http://img.youtube.com/vi/'+$(this).find('embed').attr('src').split('/')[4]+'/mqdefault.jpg">').remove();
    });
  });
});

Iterate through all your titles, then traverse from the title to find your container and load the embedded element into it. After the load is complete we grab the src attribute and remove the embedded element.

Just to give you an example. Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: How to get a YouTube video screenshot image (thumbnail)?

Post by Paulostge on Fri Nov 21, 2014 12:00 am

Although my ajax method has looked good idea to check
avatar
Paulostge
Forumember

Male Posts : 115
Reputation : 17
Language : Greek
Location : Greece

http://www.thegreeksenergy.com

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum