Smarter ideas worth writing about.

Delivering Multi-Screen Video Content

Recently, I was comparison-shopping for patio furniture online. After deciding on the features I was interested in, I began comparing the similar items at various sites, looking over the pictures, and reading the product descriptions and reviews. One of the sites had a video alongside the product description. In the video, a gentleman showcased the product and demonstrated how the table extended. I was really impressed by how smooth and easy it was to extend the table. I knew at that moment that I wanted my table to extend like this product. The product descriptions and photos offered at competing sites weren’t nearly as effective as this one simple video. It was a huge differentiator for me.

Video content is simply a powerful tool for reaching customers in a compelling fashion, whether as part of marketing patio furniture or providing self-help and training videos.

In today’s landscape, you need to deliver video in multiple formats to your users. They will view your site from a mixture of desktop browsers, smartphones, and tablets. Since not all HTML5 capable browsers support the same video codecs and legacy browsers don’t support the HTML5 video element at all, a very common strategy is to use an HTML5 video with Flash player fallback implementation.

The basic approach is to create the video element markup with source elements for each video format (and optionally subtitles and chapters) that you wish to deliver. If the browser is capable of using that format, it will do so. If not, it will try to use the next one. As a last resort, an object element will contain configuration for a Flash player. In a typical scenario, the MP4 version of the video element will be the same version played by the Flash player.



As you can see, to get wide coverage, you need to have at minimum an MP4 version and an Ogg Theora version.  While newer versions of FireFox, Opera, and Chrome still support Ogg Theora, you should also add in support for WebM as well.

The fallback solution isn’t the real challenge, however. The real challenge is managing the multiple renditions of your video.  If you only have a few videos for your site, it may be reasonable to manually transcode your video into the formats you need. However, this solution doesn’t scale well with many or frequently changing video assets.  Manual transcoding takes a lot of time and is error-prone.

A better idea is to use an automated solution that performs video transcoding for you. Since the problems of needing multiple renditions of digital files also applies to images, audio and more, it makes sense to use a common system to help manage all of these.  This way, managing all of your assets has a common interface. It is even better if this solution can be directly integrated into your WCM, since it can offer a much better interface for content authors to find what they need to produce page content.

The Adobe CQ5 platform offers a Digital Asset Management (DAM) system that does all of these things.  It is the common place for creative assets such as images, audio, and video files to be managed.

The system allows for role-based permissions so that those creating videos might be granted the ability to add, edit or delete assets, while a content author might be restricted to only view the assets that are available for use.

Content authors can easily find these assets while they build pages, reducing context switching.  When authoring pages in CQ5, a Content Finder tool is available that allows authors to look up a video they want to place on the page they are working on without switching contexts.



With respect to Video transcoding, another benefit is that you have the ability to create new transcoding options and tweak existing ones to your liking by the creation of Video Profiles. As the browser landscape changes, this is very important.

In the next post, I’ll explain in more detail how to leverage Video Profiles in Adobe CQ5 and how renditions are used with the Video Player component.


About The Author

Technical Architect, Adobe Enterprise Solutions
Ryan is a solution architect specializing in Adobe enterprise technologies including CQ5, LiveCycle and Flex and is a Team Lead in the Adobe Enterprise Solutions Practice.