Nilai has quickly morphed from being a simple list of links to many lists of links each with their own purpose. Using Smart Labels, which are getting smarter with each release, members of Nilai can save links into these lists with a single click.

Sometimes the purpose of saving these links is to watch a video, listen to a bit of audio, or save a link to do something with at a later time. Starting today it is easier than ever to accomplish some of these tasks without ever having to leave Nilai. Previews make it simple to preview links to video, audio, photos, products, or even code. By simply saving a bookmark to the more than 12 supported services Nilai will automatically identify what the link is to and prepare a preview for you.

Let me give you some examples. The most obvious example is video. If you’re like me you don’t have time during your work day to watch YouTube videos that are being circulated throughout the web via Twitter or from my friends via instant messages. So I save these bookmarks to Nilai to watch later. Now, with Previews, Nilai will let me watch the video on my iPad, iPhone, or my Mac without needing to open the YouTube application or website. It looks like this.

For me audio works much the same way. Sometimes I have time to listen to a bit of audio – like on my 90-mile drive to work. For those occasions I prefer to subscribe to a podcast powered by Huffduffer. But, what if I want to listen to a bit of audio in a few hours on my computer or perhaps on my iPad at night in bed? Using Previews Nilai makes it possible to listen to audio from services like Huffduffer and others without needing to subscribe to a podcast or sync with iTunes. Quick, simple.

Video, audio, and photos is just the beginning. Here is a list of the services that Previews supports today: YouTube, Viddler, Flickr, Vimeo, Speaker Deck, Dribbble, Instagram, Twitpic, Skitch, Github’s Gists, Huffduffer. With many, many more on the way. In fact, I’ll tell you straight away that all of the popular recipe sites are next.

I hope you enjoy the new site and Previews.

Back in June 2008 I added an oEmbed service to Viddler. That means that in the next version of WordPress you’ll be able to embed Viddler videos using a very simple embed code like this:

I’m looking forward to updating the Viddler WordPress plugin to support this new schema and make it even easier for WordPress users (such as myself) to embed videos from their favorite video sharing services.

Pickles helps out. Circa January 2007.

Viddler’s player is, in my incredibly biased opinion, the best Flash video player available. Especially if you’re of the sort that likes to engage in conversation or put an incredible amount of metadata in your videos.

Using Viddler’s API for various projects has always resulted in some sort of learning experience for me. Not only in using APIs in general, but in how to best utilize Viddler’s platform, player, API, etc. etc. to get the best results. This helps to improve Viddler’s services, but also the Web at large.

One of the things I, and the entire team at Viddler, have learned is that most people want their player to perfectly wrap their video. That is, they’d like their video to be as chromeless as possible while retaining the conversational quality of the enhanced timeline that Viddler affords.

Knowing this we were excited when oEmbed, and its underlying methodology, allowed for this to happen programmatically.  This made it rather easy for developers, such as the team at Pownce, to use this service on Viddler to embed videos knowing only the URL assigned to it, in a way that shows off the quality of the player, and keeping the aspect ratio of the video that the publisher created. Perfect.

That one underlying and undocumented feature of oEmbed, that is, that the response from oEmbed was an embed code with the dimensions perfectly suited for your video based on a maximum width – is what I think will make the following JavaScript useful to developers using Viddler’s API.

The response from the API method of viddler.videos.getDetails includes the dimensions of the original video uploaded.  It does not, however, include the embed code of the proper dimensions given a specific width. You have to either figure that out own your own, use oEmbed (which is yet another call), or do the math yourself.

Included in this simple ZIP file is both the JavaScript and PHP functions you would need to determine the appropriate height for a video given a specific maximum width.  These files do not include the ability to use the oEmbed service. For that, you will need phpViddler or your own homegrown way to call that service.

Happy embedding!

However, since I’ve never mentioned oEmbed here on my site, I wanted to quickly go through how it came to be, how I got involved, what it is, and who is using it so far.

How oEmbed came to be

I wasn’t in the room, so I can’t be sure without asking the four most involved people in the development of the spec, who was the “inventor” of oEmbed.  It was either Cal Henderson, Leah Culver, Mike Malone, or Richard Crowley.  Leah, on her blog, says that they were all at dinner and were discussing this solution.  So we’ll give them all credit.

I got involved, not the with the development of the spec itself, but with implementing it in one of the first providers of the spec, Viddler.  Mike Malone, who is a friend of mine who happened to begin working at Pownce, the first consumer of the spec, told me it’d be a neat idea if I implemented oEmbed early-on for Viddler.  I took one look at the spec and immediately thought it’d be a good idea.

What is oEmbed?

If you are like me, then you think of the World Wide Web as a library of information.  This information has a wide range of media types.  Just like in a library, there are countless numbers of books each having their own pages, photos, words, etc.  However, if I said to you – go pick up John Steinbeck’s The Grapes of Wrath, turn to page 157 (which is the first page of Chapter Eleven) and let me see it – you could do that pretty easily.

Now, think of that page 157 as a URI. You’re probably used to seeing the acronym of URL, which rolls of the tongue much easier, but URI or Uniform Resource Identifier, is a much more proper term.  So it is an unique identifier for a resource.  In the case of The Grapes of Wrath, the resource is just plain old text.  But on the web we have URIs that link us to text as well as photos, audio, and video.

If I were to link you to this URI and you followed it, you would see that its primary purpose is to show you my iPhone macro lens video demonstration.  Viddler is the book, my video is the page, the video itself is the resource.

Get it? Got it? Good.

Now. Lets say that you were a developer and you wanted to allow people to link from your application to a any resource on the Web, and embed that resource into your application directly.  Here is a quick example, which at this time does not yet exist but I think it should. Lets say that you are having an instant message conversation with me and you give me a URI to one of your photos on Flickr.  Wouldn’t it be neat if that photo automatically showed up, as a small thumbnail, within our conversation just because you linked to it?  This is the type of innovation oEmbed allows for.

Who is using it?

It would seem that oEmbed.com’s “Providers” section is being maintained, so that’d be the best resource to see who are the providers of oEmbed so far.  It doesn’t seem like the “Consumers” section of the site is being maintained, as I’m fairly sure more than just Pownce is using this. I think Lijit might be experimenting with it, but it may not have gone live yet.

As of this writing Flickr, Viddler, Qik, Pownce, Hulu, and Revision 3 are providing end-points for this service.  You can navigate to the documentation for each of these service providers by going to oEmbed.com’s Provider section.

Conclusion

I think if you are a potential provider of oEmbed you would do well to add it to your development roadmap to implement it when you can.  If you are developing an application where you think oEmbed would come in handy, and you need any help – don’t hesitate to ask me or any of the people I linked to above.  I just got an email last night letting me know about the tutorial on Webmonkey for oEmbed, so it won’t be long before the press of the existence of oEmbed begins to turn into tutorials for use and then I hope a large number of implementations are announced.  Like the IM one I mentioned above, I think that’d be awesome.

Until next time, I’m going to Pownce some Viddler videos.