• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1957
  • Last Modified:

Get Thumbnails from Vimeo

Have a simple video gallery on my site created with classic asp.
Database contains video title and the video url from vimeo.

I have been able to get the actual video to display but not sure how to get the thumbnails for the videos.

I have a page which shoud list my video titles with thumbnails.
There is a method to get the url of the thumbnails:
http://vimeo.com/api/docs/methods/vimeo.videos.getThumbnailUrls
but I don't know how I get to use the actual url which is returned.  

0
harris9999
Asked:
harris9999
1 Solution
 
ProculopsisCommented:

The json format response should drop into your javascript nicely, as in the following simulation:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26630467.html</title>

<script>

window.onload = function()
{
  var vimeo;
  eval( "vimeo = " + document.getElementById("thumbnail").innerHTML );

  var image = new Image();
  image.src = vimeo.thumbnail[2]._content;
  image.height = vimeo.thumbnail[2].height;
  image.width = vimeo.thumbnail[2].width;

  document.body.appendChild( image );
}
</script>

<style>
#code { width: 145px; height: 100px; border: 1px solid red; }
</style>

</head>

<body>

vimeo.videos.getThumbnailUrls<br />
JSON<br />
Response<br />
<div id="code">
<pre id="thumbnail" >
{
  "thumbnail":[
    {
      "height":"75",      "width":"100",      "_content":"http://www.opendns.com/dashboard/img/placeholder_md.gif"    },
    {
      "height":"150",      "width":"200",      "_content":"http://www.opendns.com/dashboard/img/placeholder_md.gif"    },
    {
      "height":"200",      "width":"300",      "_content":"http://www.opendns.com/dashboard/img/placeholder_sm.gif"    }
  ]
}
</pre>
<div>

</body>

</html>

Open in new window

0
 
harris9999Author Commented:
Ok I kind of undertsand how that works.
Now trying to combine it all.
Code started with below. Been playing with it but unsuccessful so far to get the thumbnails from the vimeo urls.
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26630467.html</title>

<script>

window.onload = function()
{
  var vimeo;
  eval( "vimeo = " + document.getElementById("thumbnail").innerHTML );

  var image = new Image();
  image.src = vimeo.thumbnail[0]._content;
  image.height = vimeo.thumbnail[0].height;
  image.width = vimeo.thumbnail[0].width;

  document.body.appendChild( image );
}
</script>

<style>
.video{ margin-bottom:20px;}
#code { width: 145px; height: 100px; border: 1px solid red; }
</style>

</head>

<body>

vimeo.videos.getThumbnailUrls<br />
JSON<br />
Response<br />
<div id="code">
<pre id="thumbnail" >
{
  "thumbnail":[
    {
      "height":"75",      "width":"100",      "_content":"http://www.opendns.com/dashboard/img/placeholder_md.gif"    },
    {
      "height":"150",      "width":"200",      "_content":"http://www.opendns.com/dashboard/img/placeholder_md.gif"    },
    {
      "height":"200",      "width":"300",      "_content":"http://www.opendns.com/dashboard/img/placeholder_sm.gif"    }
  ]
}
</pre>
</div>
<%
dim vidtitle(3)
vidtitle(1)="Video 1"
vidtitle(2)="Video 2"
vidtitle(3)="Video 3"

dim vidurl(3)
vidurl(1)="http://vimeo.com/11436985"
vidurl(2)="http://vimeo.com/16871362"
vidurl(3)="http://vimeo.com/16894558"


for i=1 to 3
%>

<div class="video">
	<div class="videotitle"><%=vidtitle(i)%></div>
	<div class="videotitle"><%=vidurl(i)%></div>
	<div class="videothumbnail"></div>
</div>

<%
next
%>

</body>

</html>

Open in new window

0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now