Using Oembed with Hulu (and understanding JSONp)

Question

If anyone can shed any light on any of this process, that would be sweet. Here's the deal. Given the Hulu video URL (e.g. 'www.hulu.com/watch/154344'), I want to be able to use Javascript (w/ jQuery is fine) to retrieve the embed url (i.e. 'http://www.hulu.com/embed.html?eid=wvqxnyjrtho0a6osltsuig').

Also, just so you know, I am working on in a development environment on localhost.

It seems to me that the easiest way to do this would be to use the oembed service. Hulu offers the oembed service, which is demonstrated on the ombed page. Based purely on the example shown on the oembed page, the url format for this eombed info should be 'http://www.hulu.com/api/oembed.xml?url=http%3A//www.hulu.com/watch/154344'. And if I open that in a browser, that works!

So I tried running the Javascript like this:

var url = 'http://www.hulu.com/api/oembed.xml?url=http%3A//www.hulu.com/watch/154344';

$.getJSON(url, function(data) {
    alert(data.embed_url);
});

BUT, that doesn't work. I get an error that says:

XMLHttpRequest cannot load http://noembed.com/embed?url=http%3A//www.hulu.com/watch/154344. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

So I looked things up a bit more. It looks like I need to use JSONp. I also read a bit more about JSONp. It looks like all I need to do to enable JSONp was change the URL format to this, adding the callback=data to the end: http://www.hulu.com/api/oembed.xml?url=http%3A//www.hulu.com/watch/154344&callback=data. No dice. It still gives me the same error.

What am I doing wrong?

Answer 1

When using JSONP with jQuery, don't give the callback a name. Use a ? and jQuery will replace it with a name for you.

var url = 'http://www.hulu.com/api/oembed.xml?url=http%3A//www.hulu.com/watch/154344&callb‌​ack=?';