jQuery flash video load

Since I don’t have the patience to create a ‘return to your place from a click’ search in my current portion of my current project, I started thinking about some of the jQuery plugins I’ve found recently and how I can use a video search results to dynamically display a flash video based on the video thumbnail link click.  Of course I love jQuery and of course someone has already created just the plugin I need.  I have used the jQuery version of the swfobject before in the current project I’m working on as well as previous projects, and I’m thrilled to do so again.  So of course you need to run out and get yourself a copy of that and the jQuery javascript library.  Then on to the nuts and bolts.

I am running a search on videos, how I get there isn’t really the issue, we can all use Coldfusion to spit out queries with our eyes blindfolded (and one hand tied behind our back?).  Lets just skip all of that and just pretend we have the resulting query named aptly ‘qVideos’.  This is where we shall begin.

First we must set up the query and the links. I’m using standard links, which in the end will also help with the whole ‘unobtrusive’ thing.  This way it will break down ‘gracefully’ should Javascript be disabled on a client computer.  After all, the whole point of this section of the website is to view videos.  So basically, we are using a standard cfoutput to loop over the following anchor tag (how you display is up to you):
<a href=”videoplayer.swf?vID=#qVideos.Filename#.flv&startvid=1″ class=”swfLoader” target=”_blank”><img src=”/pathtothumbs/#qVideos.Filename#.jpg” width=”132″ height=”98″ /></a>

This link of course is a link to our handy special video player which knows where to look for the files, it just needs the file name to display.  If javascript is disabled, the link will instead pop open to a new video player page thanks to the target call.  Now to get this to work we need to set up our document ready function which uses a clever anchor tag reference with the class swfLoader.  We also need to add a named div for where we’re playing our video, in this case we have a div with id of ‘videoPlayer’ somewhere on the page, just not here.
$.swfobject.embedSWF(this.href, “videoPlayer”, “453″, “275″, “9.0.0″, “”,flashvars, params, attributes);
return false; //return false so that the link click does not get followed

So then load up the page and you can click on your happy little thumbnails (or if you haven’t got those, a link by itself will do) and your linked video will be played in your designated div.  Of course you’ll have to figure out your own video player, I have the luxury of flash geniuses that I can rely on, but it’s relatively simple.