How do I perform a video search with Vimeo API version 3 (beta) and jQuery Ajax?

Question

Late Breaking Update:

Hi Dashron,

I've been doing some independent research & what I am seeing is that every other video API that supports jQuery Ajax i.e. JSONP will deliver the following file during an API call:

crossdomain.xml which basically looks like this:

<cross-domain-policy>
<allow-access-from domain="*" />
<allow-http-request-headers-from domain="*" headers="*" />
<site-control permitted-cross-domain-policies="master-only" />
</cross-domain-policy>

This is at the heart of CORS. I get this file from YouTube, SoundCloud and DailyMotion.

However when using fiddler utility to debug the Vimeo API testing as per your suggestions this file never shows up in the traffic interchange.

Further if I change the Ajax call type to merely JSON (no JSONP) I get a 302 response which indicates a redirect but does show the accept header as per your instructions. Obviously JSONP is required or clientside API is useless but this leads me to believe your API team has:

A. Not tested jQuery AJAX and; B. Has not enabled CORS

I hope this helps you get API v. 3.0 CORS compliant for jQuery Ajax JSONP traffic.

Thanks,

Len

Original Missive:

I am trying to use jQuery Ajax to perform a simple videos search.

According to Vimeo API support this is supported with the new beta api version 3:

Excerpt from their email to me:

The good news, is API3 will support this feature. It is currently in Beta, but we have many people using it in production apps.

You can create a new app at https://developer.vimeo.com/apps/new?oauth2=enabled, or enable it on your app by adding “?oauth2=enabled” to the end of your apps edit page. You can find VERY EARLY documentation at developer.vimeo.com/api/docs.

As long as you don’t include your application secret in your requests, everything should work fine. Let me know if you run into any issues! END EXCERPT

I have tried to do this unsuccessfully with the following code:

var urlX = 'http://api.vimeo.com/videos?query=elvis';

$.ajax({
    url: urlX,
    type: "GET",
    beforeSend: function (req) {
        req.setRequestHeader("Vimeo-Client-ID", "<My API Key>");
        req.setRequestHeader('Content-type', 'application/xml; charset=UTF-8');
    },
    dataType: "jsonp",
    success: function (data) {
        alert("SUCCESS");
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Error: " + thrownError);
    }
});

}

I built this by referring to the following spec:

https://developer.vimeo.com/api/docs/spec

This does not work. Can anybody help as it has been 3 days without any further responses from Vimeo API support.

Thanks!

UPDATE:

I tried this and it does not work. Please supply sample code to save time all around. Thanks very much!!

Thanks for the reply. Unfortunately this does NOT work:

urlX = 'http://api.vimeo.com/videos?query=elvis&client_id=XXXXXXXX';

$.ajax({
    url: urlX,
    type: "GET",
    beforeSend: function (req) {
        req.setRequestHeader('Accept', 'application/vnd.vimeo.*+json;version=3.0');
    },
    dataType: "jsonp",
    success: function (data) {
        alert("SUCCESS");
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Error: " + thrownError);
    }
});

I also tried this UNSUCCESSFULLY... :((

urlX = 'http://api.vimeo.com/videos?query=elvis&client_id=XXXXXXXX';

$.ajax({
    url: urlX,
    type: "GET",
    headers {
       "Accept": "application/vnd.vimeo.*+json;version=3.0"
    },
    dataType: "jsonp",
    success: function (data) {
        alert("SUCCESS");
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Error: " + thrownError);
    }
});

I tried this unsuccessfully too:

$.ajax({
    url: urlX,
    type: "GET",
    headers {
       "Content-Type": "application/vnd.vimeo.*+json;version=3.0"
    },
    dataType: "jsonp",
    success: function (data) {
        alert("SUCCESS");
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Error: " + thrownError);
    }
});

And finally I tried this as per the following StackOverflow article: Cannot properly set the Accept HTTP header with jQuery

$.ajax({
    url: urlX,
    type: "GET",
    headers {
       Accept: "application/vnd.vimeo.*+json;version=3.0",
       "Content-Type": "application/vnd.vimeo.*+json;version=3.0"
    },
    dataType: "jsonp",
    success: function (data) {
        alert("SUCCESS");
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("Error: " + thrownError);
    }
});

Without any specific error message I have no way of deducing a solution and would be tremendously grateful if a working example were supplied. I am sure it would help other jQuery developers using v3.0 API.

Thanks!!

UPDATE - Looks like a cross-domain security issue

One of my developers took a look at this and suggested that since json went through but not jsonp there is a "CORS" iissue; in other words your API does not allow cross-domain requests as per the error received:

Error: jQuery18305652002056594938_1376096997218 was not called

I think you guys should absolutely test this from a domain other than vimeo.com as we can go back & forth forever but if cross-domain calls are not being supported no amount of coding on my part can affect that. That is a job for your staff to enable cross-domain requests.

    urlX = 'http://api.vimeo.com/videos?query=elvis&client_id=d0b4a83fc5c12570e9270fc54ef6ecabb8675fcf';

    $.ajax({
        url: urlX,
        type: "GET",
        beforeSend: function (req) {
            req.setRequestHeader('Accept', 'application/vnd.vimeo.*+json;version=3.0');
        },
        dataType: "jsonp",
        success: function (data) {
            alert("SUCCESS");
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $("#errorMsg").text(thrownError);
        }
    });
}

Thanks,

Len

score 1 · Answer 1 · edited Dec 25 '14 at 13:55

Thanks to Vimeo support I was finally able to achieve a working sample. My error was assuming that JSONP was required even though it is not. Since Vimeo is CORS enabled in version 3.0 of their API the jQuery getJSON() function will work cross-domain.

Here is a working sample. Hopefully this will save someone a bit of time and effort.

function TestVimeo() {

        urlX = 'https://api.vimeo.com/videos?query=elvis&client_id=XXXXXXXXXXXXXX';

        $.getJSON(urlX, function (data) { console.log(data); })
        .success(function (payload) {

            console.log("second success");
        })
        .error(function (jqXHR, textStatus, errorThrown) {

            console.log('******* ' + "error: " + textStatus + ' *******');

        });

    }

score 0 · Answer 2 · answered Aug 09 '13 at 14:34

0

It looks like the specs are out of date.

The Vimeo-Client-ID header is no longer respected. All you need to do is add your client id to the url as a querystring parameter.

http://api.vimeo.com/videos?query=elvis&client_id=XXXXXXXXX

Additionally, you will need to provide the proper accept headers as stated in the docs, Accept: application/vnd.vimeo.*+json;version=3.0

answered Aug 09 '13 at 14:34

Dashron

3,968
2
14
21

The above does not work. I have updated the post. Please see my sample jQuery Ajax. It calls back with no error information. Fiddler also shows no error information. – Krafty Aug 09 '13 at 18:46
It seems JSONP is not being supported. I have updated the post with my code. This goes through fiddler only when setting the ajax "type" attribute to "json" and then it receives a 302 response which is a redirect of sorts according to my research. If I send as type: jsonp then the error is that the callback address was not called. See updated post. – Krafty Aug 10 '13 at 01:16

How do I perform a video search with Vimeo API version 3 (beta) and jQuery Ajax?

2 Answers2