Video distribution services like Youtube and Vimeo are now entrenched in our everyday lives as we both create and consume video content, while relatively new entrants into the space like VideoPress are emerging as user friendly alternatives for embedding H.264 video into a WordPress blog. And of course there’s the JW FLV Player and Flowplayer, two popular Open Source apps that thankfully make it much easier today to publish a single video or modest playlist of Flash video in your own customizable player environment.

But what happens when you have a portfolio or library of say 50, a 100, or even more videos that you want visitors to your web site to be able to browse and sample from within an efficient yet compelling user experience that is also easy to set up and manage?

I was helping some friends at a San Antonio production company tweak some features on their company web site recently and wanted to share with you a quick look at the approach we went with for addressing this type of challenge.

The key ingredients needed are:

1) A library of custom encoded H.264 FLV/F4V videos,

2) A Media RSS formatted XML file, and

3) An app known as the CoolIris 3D Embed Wall.

Screenshot of CoolIris 3D Embed Wall in action.

You may already be familiar with CoolIris via their proprietary browser plug-in for displaying images and video. CoolIris wasn’t on my radar until I saw their logo last year in a little 125X50 ad banner in the TechCrunch sidebar. (proof that old school ad banners actually work sometimes?)

While learning about the CoolIris plugin I noticed that they also offer a developer version of the CoolIris Embed Wall which allows you to display a CoolIris Wall on your site via a Flash player served from CoolIris.com. And that’s the technique we’ll be going into here.

A couple quick side notes though before we get started –

– CoolIris now offers CoolIris Express which does a nice job of automating much of this process for you. But if you’re searching for help on how to build a public feed of your own video assets and tweak your code to the fullest then you’ll want to read on.

– I’ve been using Flash since version 2 and with each passing year it seems I rely on it a little bit less to solve web problems, but video remains an area where Flash continues to shine. And with the Flash plugin now reportedly installed on 99% of desktops in mature markets (though some would argue this number) and 80% of online video being viewed with Flash it’s clearly among the leaders in this market. Keep in mind though that even with the installed base growing, Flash still lacks that kind of dominant market penetration on mobile devices. So the choice to go with a Flash based solution like this is not without its trade-offs.

Building your 3D Video Wall Step 1: Gather and prep your video assets.

The most time consuming aspect of building the wall turned out to be prepping all the media assets, and there are couple things to watch out for during this part of the process. One is audio. While testing out videos to include in the embed wall we hit a slight speed bump because a few of the videos were using some older audio codecs that apparently hosed our CoolIris video playback. We re-encoded those files using AAC and were back in business.

Another decision you may have to make is how you want to handle differing media formats. In this case the library included a cross section of standard 4×3 aspect ratio assets along with 16×9 assets with both 1:85 to 1 and 2:35 to 1 ratios. For this project the 4×3 video was pillarboxed in order to deliver a standard wide screen viewing experience across all the video. Both Episode and Compressor were used to do this part of the job. If you’re looking for an open source, multi-platform solution to handle your video encoding you may want to take a look at Handbrake and Avidemux.

If your video library is large and will be growing rapidly, before you get started it would also be wise to devise a solid naming convention so you can more easily keep track of your files.

OK, now that you have your video prepped and ready to go, all that’s need to complete this step is a massive FTP upload session (Filezilla is a great open source app for doing this) to get your video on your server(s) or in the cloud. Important to mention here that if your video assets are deployed across multiple servers and/or under a variety of domain names, be sure and read up on Adobe’s Cross-domain policy file specification.

Building your 3D Video Wall Step 2: Creating a Media RSS file.

First you’ll need an app for editing and managing your Media RSS format XML file. If you’re a coder by trade, you no doubt already have a favorite text editor or two in your toolbox. But if coding is not your world, there are several options out there for you to choose from, many of them free. Notepad ++ is a popular choice if you use Windows, jEdit is a Java based cross-platform solution, and Smultron is a text editor written in Cocoa for Mac OS X Leopard 10.5. (Note: Looks like dev work may have ceased on Smultron. The app appears stable but we still haven’t tried it on a box that’s been upgraded to Snow Leopard.) FWIW, since I started running Puppy Linux on my ThinkPad I’ve been trying out BlueFish and so far like what I see.

The good news here is that just about any text editor should work for you as long at is saves “raw” text and does not add any of its own formatting code to your xml file when it saves it.

Once you have your text editor, the process for actually editing the XML of your Media RSS file is pretty straightforward. Included below is a bare bones template if you need one to get you started.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/"
    xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>

    <!--EDIT BELOW THIS ONLY-->

         <item>
            <title>Put Title of Your First Item Here</title>
            <link>Put URL to something you want to link to here. Optional.</link>
            <media:description>Put short description here. Optional. </media:description>
            <media:thumbnail url="http://put_url_to_thumbnail_jpg_file_here"/>
            <media:content type="video/x-flv" url="http://put_url_to_flv_file_here"/>
        </item>

        <item>
            <title>Put Title of Your Second Item Here</title>
            <link>Put URL to something you want to link to here. Optional.</link>
            <media:description>Put short description here. Optional.</media:description>
            <media:thumbnail url="http://put_url_to_thumbnail_jpg_file_here"/>
            <media:content url="http://put_url_to_jpeg_file_here"/>
        </item>

 <!--EDIT ABOVE THIS ONLY-->

    </channel>

    </rss>

One thing to point out here — this template includes examples both for displaying video and also for displaying only image files. Be sure and note the addition of the content type “video/x-flv” notation for the first item which is needed to identify your video.

From here, building your XML file is a matter of simply cutting and pasting a new item for each asset and filling in the blanks. I thought about finding/building a quick little PHP front end for getting our data into a MySQL database and generate the Media RSS feeds dynamically from there, but for projects like this treating the XML file as a sort of flatfile database and just editing the text directly is fast and easy so we decided just to leave well enough alone and go with that approach.

Building your 3D Video Wall Step 3: Embedding options.

While we were building and testing the wall we tried out the traditional Flash embed code technique for embedding the wall which is a good way to get started quickly. It worked fine, but when it was time to go live we turned to swfobject to handle embedding the player.

You can download swfobject and run it from your own server or you can load it from the Google AJAX Hosted Libraries API by placing this code within the head section of your web site:

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>

In the past I’ve been a proponent of downloading and running swfobject from my own servers but I’ve recently begun using the hosted Google version and it seems to be pretty reliable so far. If you want more info on how swfobject works, here are the Google swfobject wiki docs.

Now, from here all it takes to make the CoolIris Embed Wall display your video library is to include a snippet of javascript like this in the section of your web page where you want your wall to appear:

<script type="text/javascript">
var flashvars = {
    feed: "http://put_url_to_your_xml_file_here.xml"
};
var params = {
    allowscriptaccess: "always"
};

swfobject.embedSWF("http://apps.cooliris.com/embed/cooliris.swf",
                   "wall", "960", "500", "9.0.0", "",
                   flashvars, params);

</script>

<div id="wall"><!-- 3D Wall Goes Here --></div>

The above is an example of about the most basic install you can do on a 960 wide by 500 tall wall. To use this code on your site, insert the URL to your XML file in the feed variable and adjust the width and height parameters to fit the size you want your wall to be.

Another advantage to this approach is that you should be able to get your code to validate.

Building your 3D Video Wall Step 4: Customizing your wall.

There are many ways you can further customize the player via the CoolIris Javascript API or if you decide to go with a straight flash embed you can customize your player using the selection of CoolIris flashvars.

One of the nice customization options you have is the ability to integrate your logo or other branding elements into the CoolIris Wall either on the bottom bar of the player or via the ability to add a custom preload screen and/or wall backgrounds. We tested all the options and they worked well, but ultimately decided to go with just a subtle logo on the player bar.

Screenshot of playing a video in CoolIris

Many large content related companies like Hulu and Syfy are now publishing their content as CoolIris Channels for the CoolIris plugin. And now with the CoolIris 3D Embed Wall, content developers of all sizes can take advantage of this innovative video distribution platform.

If you want to keep up with the latest CoolIris news and developments, you can check out their blog and follow CoolIris on Twitter.

Whether you are building your own content to support your brand, or your users and audience are creating that content about you.

Kami Huyse and Geoff Livingston touch on some aspects of how and why content is finding its way into modern communications strategies in their recent presentation Building Brands with Social Media at the New Communications Forum.

Here’s the slideshare from their talk.

| View | Upload your own

Kami also recently shared some strategies and metrics from a social media campaign that Seaworld of San Antonio implemented as part of the launch of the new Journey to Atlantis roller coaster last year.

Here’s a Global Neighbourhoods TV interview with Kami and Seaworld San Antonio Director of Communications Fran Stephenson about the campaign.

Thanks for the insight Kami, Geoff and Fran.