Galacticast Secrets: Multiple Video Formats Support in WordPress
As you all know, we at Galacticast Labs have managed to harness WordPress to support multi-formats for each video post. Features include:
- Multiple video formats for each post.
- An automatic video player.
- A unique feed for each Post.
We reveal now the secrets behind all of this.
First, download the swanky theme created for this project called UFO ‘SPLODE (10000 Galacticast Dollars to the person who can guess who inspired that one). Then read the rest of this post to understand what the hell is going on.
This is about to get a bit technical, but stick with it, and you too can be vlogging the Galacticast way.
The Core
The key to how we get multiple formats support in our WordPress installation is using Custom Fields. When creating a post, users can enter custom fields, specifying a key and a value.
Enclosure
Some key values are actually recognized by WordPress for special handling. One of these is enclosure, which tells WordPress to include media for podcasting.
By default, if it finds a multimedia link in a post is creating, WordPress will try to create an enclosure field. The value is written on multiple lines, where the first line is line 0:
| Line # | Contains |
|---|---|
| 0 | URL to the video file |
| 1 | The size of the file in bytes |
| 2 | Mime-type (video/quicktime, video/x-ms-wmv, etc). |
For example, let us say your latest video file is located at http://blip.tv/file/get/UFOSplode-23.mov, and its size is 12345678 bytes, an enclosure key would be created with the following value:
http://blip.tv/file/get/UFOSplode-23.mov
12345678
video/quicktime
Sounds great? Well it would be if this feature of WordPress actually worked. Unfortunately, while it does a pretty good job with MP3s, it seems to have some issues with video-files.
So we enter these values by hand. Any great hosting service (like Blip) would provide the necessary information.
Also, as good hackers, we expand the values to include our own lines of data:
| Line # | Contains |
|---|---|
| 3 | The “platform”. This is displayed as the link text under the player, and is used to support multiple feeds. |
| 4 | An optional line. If set to “noshow”, a link will not be shown on the website to the file, but can be available as a feed. |
So let us say we wanted that file to be delivered to iTunes, we would write the following as the enclosure value:
http://blip.tv/file/get/UFOSplode-23.mov
12345678
video/quicktime
itunes
And if we don’t want it to show up as a link on our site, we would add an additional line.
http://blip.tv/file/get/UFOSplode-23.mov
12345678
video/quicktime
itunes
For each format we want to add to a post, we create a new enclosure key and value pair.
Thumbnail
Another custom field is used to provide a thumbnail to the post. The key for this field is thumbnail (duh), and its value is the URL to the thumbnail.
The Theme Templates
The templates in the UFO ‘Splode theme takes care of displaying each post on its own page, and automatically create a Quicktime player if it sees a post has an enclosure for the quicktime platform. This is important to remember; when writing your post, don’t worry about creating any links to video or writing HTML to make your own player! As long as you create the proper enclosures, and one of them is a MOV file with the “quicktime” platform, or shall be well.
The player is created in the logic in post-content.php, which calls the Javascript function createVideoPlayer(). This function is found in the videoPlayer.js file under the js directory of the theme. It takes the following parameters:
- url – the URL to the video. This will be automatically filled by the template logic.
- width – how wide the player interface should be. Modify to suit your needs.
- height – how tall the player interface should be. Modify to suit your needs.
After the player is displayed, we loop over all enclosures, outputting a link to each URL with the platform as the text of the link.
The rest of the theme makes use of the enclosure and thumbnail custom fields to display links and images, and CSS to stylize the site. Out of the box the style is very clean and simple, so go crazy and change the colors, fonts, and the image links. The most important templates are:
- header.php – Displays the top of the site, and also lists the feed links. Change appropriately.
- footer.php – Displays the generic site sections below.
- index.php – Special main page, which will only display the latest post, and thumbnails for the last 4.
- post-content.php – where the magic happens, displaying the player, format links, and all.
- post-list.php – generates the post information for listing in archives and searches.
- style.css – controls all the layout, sizes, and colors of the site, so you should begin your changes here.
Make use of many of the great CSS sites on the in-tur-web (I recommend http://www.w3schools.com) to include your own pics and such.
Setting Up the Theme
While I would like the theme to work right out of the box it requires the installation of the following plug-ins.
- WpLicense – (http://wiki.creativecommons.org/WpLicense) A Creative Commons generator.
- WP-PageNavi – (http://www.lesterchan.net/portfolio/programming.php) Used for multi-page navigation. I actually find the WordPress navigation simply doesn’t work.
- Sociable – (http://push.cx/sociable) Outputs links so others can bookmark your post on social networking sites.
A Feed per Format
WordPress can of course generate a feed, and automatically will create the media enclosures needed for podcasting. You simply use the following URL structure:
http://www.ufosplode.com/?feed=rss2
where you of course replace the www.ufosplode.com to the path of your own blog.
However, if you check the XML of the feed, you will see that ALL enclosures are included in the field. Clearly, this does not help us with our desire to have each format to be delivered along a unique feed (without setting up separate websites, or posting multiple times). Even worse, our friendly neighborhood feedburner will only include one enclosure in its output. What to do?
Our usual answer: Hack.
We modified the WordPress logic so that either a media or a platform parameter can be passed to the feed URL.
The media parameter is used to only include enclosures matching that media format. For example:
http://www.ufosplode.com/?feed=rss2&media=video/quicktime
Will produce a version of your feed which only has the quicktime format files.
Alternatively, you can use the platform parameter to only include enclosures whose line #3 matches the passed value. For example:
http://www.ufosplode.com/?feed=rss2&platform=itunes
Will produce a version of your feed with enclosures for video meant for the iTunes platform.
Why do you need both media and platform support? We at Galacticast use this to make sure the m4v/iPod friendly version of the file goes to our iTunes feed (the “itunes” platform feed), while the .H264 version is just used on the site, (the “quicktime” platform enclosure). They are both video/quicktime media files, so we can’t use that parameter.
Installing the hack
The code change required to support this needs to be made in the rss_enclosure() function found in the feed-functions.php file under the wp-includes directory of your WordPress installation. This function is responsible for generating the enclosures in the feed.
Included with the theme UFOSplode is a file called rss_enclosure.php, which is our modification of the function. We have marked the beginning and end of our code change. All you have to do is copy this function and replace the function of the same name in feed-functions.php file.
Other Notes
We have introduced one more hack into our WordPress installations. WordPress, for whatever strange reason, will only allow enclosures of types that are video or audio. This sounds good enough for most vlogger needs, but what about supporting bittorrent enclosures? Or providing other types. If requested, we can supply the code needed for this.
Other Possibilities
I have been messing around with Broadcast Machine a tiny. It’s vlog centric approach is very appealing, and with it Channels concept provides a mechanism to have separate feeds for each channel.
However, you would still have to post the same title and body multiple times and it has no “in-browser player” where as our solution (while hack) saves you the trouble of all that.
Conclusion
So there you have it, a wondrous template and a look behind the curtain on how Galacticast pull off its multiple feed trick. We are giving it out to the community in hopes its functionality will be expanded.
Expanded how? Well I have a couple of ideas:
- Get Flash supported it, so if you have a flash version you want to play, you can easily drop in the code.
- Stop this “hacking” and make this a WordPress plugin. Unfortunately, it doesn’t appear there are any hooks to modify the RSS feed. But a plugin could at the very least be useful for easy post creation. As for the RSS feed, maybe a special template would help.
- If combined with the ideas of Enric’s plugin, supporting multiple in-page players for a users preferred format could be created.
- Cross-posting from great hosting sites (a random example … um … Blip!
) could fill these fields appropriately.
What are your ideas? Whatever they are and whatever you do, tell us about it.
And recognize us as the Galactic Gods that we are …