content developer build share monetize content developer logo content developer masthead bottom

How To Make a 3D Web Video Wall with XML, FLV and CoolIris

Whether you’re sharing stories about or telling tales , there’s no shortage of strategies content developers can turn to for publishing web video.

Video distribution services like and are now entrenched in our everyday lives as we both create and consume video content, while relatively new entrants into the space like are emerging as user friendly alternatives for embedding video into a blog. And of course there’s the and , two popular apps that thankfully make it much easier today to publish a single video or modest playlist of in your own .

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 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 videos,

2) A formatted file, and

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

cooliris video wall embed video example screenshotScreenshot of CoolIris 3D Embed Wall in action.

You may already be familiar with CoolIris via their proprietary 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 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 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 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 (though some would argue this number) and 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 that apparently hosed our CoolIris video playback. We re-encoded those files using 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 in order to deliver a standard wide screen viewing experience across all the video. Both and 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 and .

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 upload session ( is a great open source app for doing this) to get your video on your server(s) or in the . 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 .

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. is a popular choice if you use , is a based solution, and is a text editor written in for . (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 .) FWIW, since I started running on my I’ve been trying out 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 front end for getting our data into a database and generate the Media RSS feeds dynamically from there, but for projects like this treating the XML file as a sort of 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 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 to handle embedding the player.

You can and run it from your own server or you can load it from the 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 .

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 .

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

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

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.

cooliris video wall embed screenshot
Screenshot of playing a video in CoolIris

Many large content related companies like and are now publishing their content as 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 and .

gray line

Filed under share by david cummings on Wednesday 6 January 2010 at 11:42 am

Tags: , , , ,

  |  

7 Comments »

  1. Comment by Paulius — May 20, 2010 @ 3:35 pm avatar

    Thank you for your post. It helped me to simplify the default code that cooliris provides. The default code is clunky and forcers users to repeat the params twice.

    The only thing I was not sure why where I have to put
    ‘wmode': ‘opaque’
    if I want to change default cooliris bg params.bgcolor = “#f4f4f4″;

    Any ideas ?


  2. Comment by Med — May 27, 2010 @ 1:28 pm avatar

    Hi there,

    can you post the sample code for adding custom button to the lower right? Cooliris documentation is very cryptic.

    thanks much,
    Med


  3. Comment by dc — May 27, 2010 @ 3:41 pm avatar

    To add a custom button to a CoolIris Wall tool bar I added the following line to the swfobject var=flashvars section –

    customButton: “http://address to your image file,http://url to where you want the button to click to”,

    One note: looks like the custom buttons now display just above the right corner of the toolbar, and no longer on top of it.

    Good luck.

    DC


  4. Comment by Animation Houston — July 2, 2010 @ 9:42 pm avatar

    Nice tutorial. I also ready your article on custom QR codes. Thanks for the good content.


  5. Comment by Manish — March 20, 2011 @ 12:36 am avatar

    Can I add my logo in youtube videos and post them by CoolIris Wall on my website? How?


  6. Comment by Advancedflvplayer — March 31, 2011 @ 6:30 am avatar

    Excellent tuto……… Thanks for the code reference, useful one!


  7. Comment by bill — March 4, 2012 @ 1:35 pm avatar

    To save my life I cannot create a “Custom button”. Seems like it should be easy enough, just another option on the feed var, but No. Does anyone have an example of how to put in the button?
    Thanks.


RSS feed for comments on this post. TrackBack URI

Leave a comment

Next article: How To Customize QR Codes With Your Brand’s Identity
Previous article: Social Media in San Antonio

spacer

More Fresh Content -- The Latest Activity on the Content Developer Network.

spacer

jobcoin icon Content Developer Jobs

see more jobs...    submit a job...

delicious icon Content Developer Bookmarks

Citizen Media Law Project
The mission of the Citizen Media Law Project is to provide assistance, training, research, and other resources for individuals and organizations involved in online and citizen media. Affiliated with the Berkman Center for Internet and Society and the Center for Citizen Media. Bookmarked 09/13/2011.

The MobileESP Project
MobileESP is an open source project designed to provide web site developers with a lightweight API for detecting whether visitors are using a mobile device, and if so, what kind. Distributed under Apache License 2.0, source code is available in PHP, Java, APS.NET, Ruby and JavaScript. Bookmarked 05/25/2011.

Open Journal Systems
Open Journal Systems is a free, open source solution for managing and publishing scholarly journals online. Developed by the Public Knowledge Project, OJS seeks to improve the editorial process through innovation and make open access publishing a viable option for more journals worldwide. Bookmarked 04/15/2011.

International Digital Publishing Forum
The International Digital Publishing Forum is an organization dedicated to the development and promotion of electronic publishing and content consumption. The IDPF maintains the EPUB content publication standard for creating and distributing digital books that can be accessed across EPUB-compliant reading devices and applications. Bookmarked 01/21/2011.

ThinkUp
ThinkUp is an open source social media insights engine that captures your conversations on social networks like Twitter and Facebook and stores that information in a database you control. Provides ability to manage and visualize your social data in various ways. Bookmarked 01/14/2011.

more del.icio.us bookmarks...

spacer
Content Developer was founded by , a San Antonio Web Developer & Freelance Content Strategist focused on using open source software to build, share and monetize multi-platform, interactive content; and how sharing knowledge via & can be used to help grow authentic brands. Learn more.

Content Developer is powered by Wordpress & Your Web Server. Content Developer and build. share. monetize. are trademarks of Cummings Hatton Corporation.