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 November 19th 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!

Paulostge
Forumember

Male Posts : 81
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 November 19th 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'));
});

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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 November 20th 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>

Paulostge
Forumember

Male Posts : 81
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 November 20th 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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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 November 20th 2014, 10:25 pm

Thank you for your time but does not help

Paulostge
Forumember

Male Posts : 81
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 November 20th 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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
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 November 21st 2014, 12:00 am

Although my ajax method has looked good idea to check

Paulostge
Forumember

Male Posts : 81
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