The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

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

View previous topic View next topic Go down

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

Post by Paulostge on Wed 19 Nov - 20:59

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 : 99
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 19 Nov - 23:21

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 : 13130
Reputation : 2816
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Paulostge on Thu 20 Nov - 2:10

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 : 99
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 20 Nov - 2:21

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 : 13130
Reputation : 2816
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Paulostge on Thu 20 Nov - 23:25

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

Male Posts : 99
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 20 Nov - 23:51

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 : 13130
Reputation : 2816
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Paulostge on Fri 21 Nov - 1:00

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

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

http://www.thegreeksenergy.com

Back to top Go down

View previous topic View next topic Back to top


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