Accessibility

Building advertising experiences for Adobe Media Player

Jonathan Tabak

Panache

Adobe Media Player provides an unprecedented, connected rich media experience to consumers in an easy-to-use, intuitive desktop interface. Publishing your content to Adobe Media Player allows you to deliver high-quality video to your audience with built-in mechanisms for security, measurability, and monetization (see Figure 1). This article discusses Adobe Media Player monetization by covering general concepts around creating and delivering rich advertising experiences using Adobe Media Orchestration Documents (AMODs).

An AMOD playing in Adobe Media Player

Figure 1. An AMOD playing in Adobe Media Player

Adobe Media Player leverages two open-standard, XML-based technologies to organize video content and orchestrate rich media experiences: Really Simple Syndication (RSS) and Synchronized Media Integration Language (SMIL).

RSS is a popular method for hierarchically organizing content and is employed throughout Adobe Media Player. It is used extensively in the Adobe Media Player Catalog where Episodes (video content) are grouped into a hierarchy of Network, Channel, and then Show. Video publishers arrange their content into RSS feeds and submit them to Adobe for inclusion in the Adobe Media Player Catalog. When an Episode is clicked, the RSS feed instructs Adobe Media Player what to play (see Figure 2): either a stand-alone video file or a SMIL file (AMOD). Please refer to the Adobe Media Player Content Developer Kit (CDK) for more information.

Linking content to Episodes in RSS

Figure 2. Linking content to Episodes in RSS

SMIL is a language for creating rich media experiences using a playlist paradigm. Blocks of rich media content—video, images, and Adobe Flash SWFs—can be sequenced across time and grouped into layout regions. Sequences can be nested, providing a virtually limitless number of possibilities. Adobe Media Player leverages a subset of the SMIL 2.1 specification and adds some Adobe Media Player–specific functionality. This subset is referred to as Adobe Media Orchestration Documents or AMODs.

Throughout this article, I will work through code listings for creating RSS feeds and AMODs, demonstrating some basic advertising including in-stream and video overlays. While the links in the RSS and AMOD work out of the box, I encourage you to create the files on your own and upload them to a web server. If you do so, please remember to update the links in the RSS and AMOD to reflect the location of your web server. The RSS feed for all of the samples in this article can be referenced at http://demo20.panachetech.com/amparticle/samples.xml.

Building your first AMOD

Before we begin to dissect an AMOD, let's first get our feet wet. We are going to create a simple AMOD that demonstrates the basic advertising functionality in Adobe Media Player and provides you with a better understanding of the workflow. There are four steps to the process:

  1. Copy and paste Listing 1 into a blank text file. Save the file as Sample1.smil and upload the file to a web server. Note the URL for use in the next step.

    <smil xmlns="http://www.w3.org/2005/SMIL21/Language">
<head>
  <layout>
    <region id="banner" />
    <region id="content" />
    <region id="logo" />
    <region id="overlayAd" />
  </layout>
</head>
<body>
 <par>
  <img region="banner"
    src="http://demo20.panachetech.com/amparticle/banner1.gif"
    dur="120s" />
  <video region="content"
    src="http://demo20.panachetech.com/amparticle/content1.flv"
    dur="120s" />
 </par>
</body>
</smil>

    Listing 1. AMOD for Sample 1

  2. Copy and paste Listing 2 into a blank text file. Replace the bold text with the URL to the AMOD you created in Step 1. Save the file as Samples.xml and upload to a web server. Note the URL to the RSS file for use in the next step.

    <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss"
  xmlns:amp="/amp/1.0">
 <channel>
  <title>Advertising Experiences for Adobe Media Player</title>
  <link>/devnet/mediaplayer</link>
  <description>Leverage the Power of AMOD</description>
  <item>
   <title>Sample 1</title>
   <description>A simple AMOD</description>
   <guid>1</guid>
   <pubDate>Jul 1, 2008</pubDate>
   <enclosure
     url="http://demo20.panachetech.com/amparticle/sample1.smil"
     type="application/smil+xml"/>
  </item>
 </channel>
</rss>

    Listing 2. RSS for Sample 1

  3. Open Adobe Media Player and click My Favorites in the left-hand pane. Click Add RSS Feed at the bottom of the screen and enter the URL to the RSS feed created in Step 2 (see Figure 3).

    Adding your RSS feed to Adobe Media Player

    Figure 3. Adding your RSS feed to Adobe Media Player

  4. Click the newly added RSS feed titled "Advertising Experiences for Adobe Media Player". Next, click the Episode titled "Sample 1"; your AMOD should now play (see Figure 4).

    Playing Sample 1 AMOD in Adobe Media Player

    Figure 4. Playing Sample 1 AMOD in Adobe Media Player

Deconstructing AMODs

Now that you have seen AMODs in action, let's take a closer look at the code. Every AMOD file contains three sections: document declaration, header, and body. Each section is defined by a set of tags and can contain specific markup (see Figure 5).

AMOD section syntax options

Figure 5. AMOD section syntax options

Document declaration

The document declaration section essentially defines the file as a SMIL-based document. The section begins with a <smil> tag and ends with a </smil> tag. The opening <smil> contains the xmlns attribute that is used to select the appropriate SMIL version for the entire document. In the case of AMOD in Adobe Media Player, it should always reference SMIL version 2.1. As such, the AMOD document declaration should be identical to Listing 3.

<smil xmlns="http://www.w3.org/2005/SMIL21/Language">
...
</smil>

Listing 3. AMOD document declaration

Header

The header section is used to provide Adobe Media Player with presentation information and custom-defined values. The section begins with a <head> tag and ends with a </head> tag. In SMIL, the header section is optional, but in AMOD it is required. The header section in every AMOD defines the four different layout regions required for advertising in Adobe Media Player. It can also be optionally used to define values for conditionally branching when in online/offline states. Both of these topics will be discussed a bit later. For now, the typical AMOD header will resemble Listing 4.

...
<head>
  <layout>
    <region id="banner" />
    <region id="content" />
    <region id="logo" />
    <region id="overlayAd" />
  </layout>
</head>
...

Listing 4. Typical AMOD header

Body

The body section is the meat-and-potatoes of the AMOD. It contains all of the video and rich media content as well as constructs for sequencing the content. The section begins with a <body> tag and ends with a </body> tag, making it similar to HTML. Instances of the <video> and <img> elements—collectively, rich media content—are targeted at different regions of the player and grouped into blocks that control their sequence of appearance during the Episode playback. Listing 5 provides an example of a simple AMOD body.

...
<body>
 <par>
  <img region="banner" src="http://www.mysite.com/banner.swf" dur="120s" />
  <video region="content" src="http://www.mysite.com/content.flv" dur="120s" />
 </par>
</body>
...

Listing 5. Sample AMOD body

Working with content

As I previously discussed, the body section contains and controls all the content in an AMOD. There are two elements that are used to define content in AMOD: <video> and <img>. These elements can be targeted at four different layout regions of the player (with some restrictions) as shown in Figure 6.

AMOD layout regions

Figure 6. AMOD layout regions

Each region can accept assets of a specific format, most with predefined dimensions. Table 1 briefly covers these requirements. Please refer to the Adobe Media Player Content Developer Kit (CDK) for more information.

Table 1. Layout region specifications

Region

Formats

Dimensions

content

FLV, F4V, H.264

Any (Adobe Media Player accepts most video dimensions and will adjust the video window space accordingly)

banner

SWF, PNG, JPG, GIF

686×60

logo

SWF, PNG, JPG, GIF

32×32

overlayAd

SWF, PNG, JPG, GIF

One-quarter of the video size (Adobe Media Player scales the asset to meet this requirement)

Note: While AMOD restricts the overlayAd region, Panache technology for Adobe Media Player enables overlays to reside anywhere on the video, enabling the use of ad units such as lower-thirds, sidebars, pop-ups, and tickers.

Video element

A <video> element specifies a piece of video content and associated options. The syntax of the <video> element is as follows:

<video region="region" src="videoUrl" clipBegin="videoStarts" clipEnd="videoEnds" dur="onScreenDurations" >
 <param name="skippable" value="skippable" valuetype="data"/>
</video>

Table 2 describes each of the <video> element's options and possible values.

Table 2. Video element options

Attribute

Value(s)

Description

region

"content"

Selects the layout region where the video should display. <video> elements are restricted to the "content" region.

src

A valid URL

Specifies a URL to a video in FLV, F4V, or H.264 format. The video can be streamed or progressively downloaded.

clipBegin

Offset expressed in seconds followed by "s"

The clipBegin and clipEnd attributes are used to play clipped portions of a video clip. clipBegin specifies where to begin the clipped portion in terms of seconds from the beginning of the video.

clipEnd

Offset expressed in seconds followed by "s"

Specifies where to end the clipped portion in terms of seconds from the beginning of the video.

dur

Number of seconds followed by "s"

Specifies the duration that the video content appears on-screen expressed in seconds.

skippable

"yes" or "no"

Defines whether or not the video content can be skipped using the video scrubber. <video> elements that are defined as unskippable will be represented by a depression in the scrubber bar. This option uses a separate piece of markup nested within the <video> element.

Image element

The other content element, <img>, defines either a static image or Flash content and associated options. The syntax of the <img> element is as follows:

<img region="region" src="contentUrl" link="linkUrl" dur="onScreenDurations" />

Table 3 describes each of the <img> element's options and possible values.

Table 3. Image element options

Attribute

Value(s)

Description

region

"logo", "banner", "overlayAd"

Selects the layout region where the content should display. <img> elements can appear in any region except for "content".

src

A valid URL

Specifies a URL to a static GIF, JPG, PNG, or Flash SWF (ActionScript 3.0). This can be an ad server URL.

link

A valid URL

Defines the <img> element as interactive. When the element is clicked, a browser will be launched with the specified URL. This can be an ad server URL.

dur

Number of seconds followed by "s"

Specifies the duration that the content appears on-screen expressed in seconds.

Building your second AMOD

Now that you have been introduced to AMOD's content elements and layout regions, let's put them to use. We will create a new AMOD based on Sample 1 that targets the content, banner, logo, and overlayAd regions. Additionally, we will make all of the <img> elements interactive. The steps for creating and publishing your RSS/AMOD combo are similar to those of Sample 1.

  1. Copy and paste Listing 6 into a blank text file. Save the file as Sample2.smil and upload the file to a web server. Note the URL for use in the next step.

    <smil xmlns="http://www.w3.org/2005/SMIL21/Language">
<head>
  <layout>
    <region id="banner" />
    <region id="content" />
    <region id="logo" />
    <region id="overlayAd" />
  </layout>
</head>
<body>
 <par>
  <img region="banner" src="http://demo20.panachetech.com/amparticle/banner1.gif" dur="120s" link="http://www.hbo.com/conchords" />
  <img region="logo" src="http://demo20.panachetech.com/amparticle/logo1.gif" dur="120s" link="http://www.hbo.com/conchords" />
  <img region="overlayAd" src="http://demo20.panachetech.com/amparticle/overlay1.swf" dur="120s" link="http://www.hbo.com/conchords" />
  <video region="content" src="http://demo20.panachetech.com/amparticle/content1.flv" dur="120s" />
 </par>
</body>
</smil>

    Listing 6. AMOD for Sample 2

  2. We need to update your existing RSS feed in order to add the new Episode created in Step 1. Open Samples.xml and copy/paste the bolded text in Listing 7. If you are using your own server, replace the url attribute of the <enclosure> element with the URL to the AMOD that you created in Step 1. Save the file and upload to a web server. Note the URL to the RSS file for use in Step 4.

    <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss" xmlns:amp="/amp/1.0">
 <channel>
  <title>Advertising Experiences for Adobe Media Player</title>
 
<link>/devnet/mediaplayer</link>
  <description>Leverage the Power of AMOD</description>
  <item>
   <title>Sample 1</title>
   <description>A simple AMOD</description>
   <guid>1</guid>
   <pubDate>Jul 1, 2008</pubDate>
   <enclosure url="http://demo20.panachetech.com/amparticle/sample1.smil" type="application/smil+xml"/>
  </item>
  <item>
   <title>Sample 2</title>
   <description>Working With Content</description>
   <guid>2</guid>
   <pubDate>Jul 1, 2008</pubDate>
   <enclosure url="http://demo20.panachetech.com/amparticle/sample2.smil" type="application/smil+xml"/>
  </item>
 </channel>
</rss>

    Listing 7. Updated RSS feed for Sample 2

  3. In order to update the RSS feed in Adobe Media Player, we need to remove it and then add it again. Open Adobe Media Player and click My Favorites in the left-hand pane. Hover over the "Advertising Experiences for Adobe Media Player" RSS feed and click the check box at the bottom-right of the item (see Figure 7). Click Remove at the bottom of the screen to remove the feed.

    Removing an RSS feed from AMP

    Figure 7. Removing an RSS feed from AMP

  4. Open Adobe Media Player and click My Favorites in the left-hand pane. Click Add RSS Feed at the bottom of the screen and enter the URL to the RSS feed created in Step 2.
  5. Click on the newly added Show titled "Advertising Experiences for Adobe Media Player". There should now be two Episodes. Click the Episode titled "Sample 2" to play your AMOD.

The primary differences between Sample 1 and Sample 2 are the extensive use of the region and link attributes. We have made content appear in the banner, logo, and overlayAd regions as specified by the <img> elements in Listing 8. Furthermore, each one of these <img> elements is interactive because we used the link attribute.

...
<img region="banner" src="http://demo20.panachetech.com/amparticle/banner1.gif" dur="120s" link="http://www.hbo.com/conchords" />
<img region="logo" src="http://demo20.panachetech.com/amparticle/logo1.gif" dur="120s" link="http://www.hbo.com/conchords" />
<img region="overlayAd" src="http://demo20.panachetech.com/amparticle/overlay1.swf" dur="120s" link="http://www.hbo.com/conchords" />
  <video region="content" src="http://demo20.panachetech.com/amparticle/content1.flv" dur="120s" />
...

Listing 8. Sample 2 AMOD snippet

Sequencing content

The power of AMODs emerges when sequencing content across an Episode's timeline. AMOD offers two content sequencing elements: <par> and <seq>. The <par> element tells content to play in parallel across the timeline, as depicted in Figure 3. Both Sample 1 and Sample 2 used the <par> element to play content in various different layout regions concurrently. A <par> element cannot specify more than one piece of content per region. The <seq> element, on the other hand, plays content sequentially (see Figure 8) and can play more than one piece of content per region over time. <seq> elements play content in the order that they are listed in the markup.

Content sequencing in an AMOD

Figure 8. Content sequencing in an AMOD

In an AMOD, <par> and <seq> elements have no intrinsic attributes and are simply defined by opening and closing tags: <par></par> and <seq></seq>, respectively. They contain only child elements of the <video>, <img>, and <switch> types. It is also important to understand how to calculate the duration of these elements. The duration of a <par> is equal the duration of its longest child element, whereas the duration of a <seq> is equal to the sum of its child elements.

You can nest the <par> and <seq> elements inside one another. In fact, a practical AMOD utilizes at least one level of nesting: a <video> element playing in parallel with a sequence of advertising content targeted at different layout regions (see Figure 9).

Sequence nesting in AMOD

Figure 9. Sequence nesting in AMOD

Note: Panache technology for Adobe Media Player allows you to create complex nested sequences with ease using a visual, timeline-based tool. You can also define absolute time offsets and durations for elements using timecode notation, as well position elements using (x,y) coordinates anywhere in the overlayAd region.

Let's try some of these sequencing concepts. We will create a new AMOD that does the following:

Although it sounds like a tall order, it is fairly straightforward task to accomplish when using nested sequencing elements:

  1. Copy and paste Listing 9 into a blank text file. Save the file as Sample3.smil and upload the file to a web server. Note the URL for use in the next step.

    <smil xmlns="http://www.w3.org/2005/SMIL21/Language">
<head>
  <layout>
    <region id="banner" />
    <region id="content" />
    <region id="logo" />
    <region id="overlayAd" />
  </layout>
</head>
<body>
 <seq>
  <par>
   <video region="content" src="http://demo20.panachetech.com/amparticle/content2.flv" dur="31s">
     <param name="skippable" value="no" valuetype="data"/>
   </video>
   <img region="banner" src="http://demo20.panachetech.com/amparticle/banner2.gif" link="http://www.apple.com/iphone" dur="31s"/>
   <img region="logo" src="http://demo20.panachetech.com/amparticle/logo2.jpg" link="http://www.apple.com/iphone" dur="31s"/>
   <seq>
    <img region="overlayAd" src="http://demo20.panachetech.com/amparticle/overlay2.png" link="http://www.apple.com/iphone" dur="15s"/>
    <img region="overlayAd" src="http://demo20.panachetech.com/amparticle/overlay3.png" link="http://www.apple.com/iphone" dur="16s"/>
   </seq>
  </par>
     <par>
   <video region="content" src="http://demo20.panachetech.com/amparticle/content1.flv" dur="120s" />
   <img region="logo" src="http://demo20.panachetech.com/amparticle/logo1.gif" link="http://www.hbo.com/conchords" dur="120s"/>
   <img region="banner" src="http://demo20.panachetech.com/amparticle/banner1.gif"  link="http://www.hbo.com/conchords" dur="120s"/>
   <img region="overlayAd" src="http://demo20.panachetech.com/amparticle/overlay1.swf" link="http://www.hbo.com/conchords" dur="15s"/>
  </par>
 </seq>
</body>
</smil>

    Listing 9. AMOD for Sample 3

  2. Update your existing RSS feed to accommodate the new Episode created in Step 1. Open Samples.xml and append the code in Listing 10 right after the <item> element corresponding to Sample 2. If you are using your own server, replace the url attribute of the <enclosure> element with the URL to the AMOD that you created in Step 1. Save the file and upload to a web server. Note the URL to the RSS file for use in Step 4.

      ...
  <item>
   <title>Sample 3</title>
   <description>Sequencing Content</description>
   <guid>3</guid>
   <pubDate>Jul 1, 2008</pubDate>
   <enclosure url="http://demo20.panachetech.com/amparticle/sample3.smil" type="application/smil+xml"/>
  </item>
  ...

    Listing 10. Updated RSS feed for Sample 3

  3. Open Adobe Media Player and click My Favorites in the left-hand pane. Hover over the "Advertising Experiences for Adobe Media Player" feed and click the check box at the bottom-right of the item (see Figure 7). Click Remove at the bottom of the screen to remove the feed.
  4. Open Adobe Media Player and click My Favorites in the left-hand pane. Click Add RSS Feed at the bottom of the screen and enter the URL to the RSS feed created in Step 2.
  5. Click the newly added Show titled "Advertising Experiences for Adobe Media Player". There should now be three Episodes. Click the Episode titled "Sample 3" to play your AMOD.

Using conditional content

AMOD provides the ability to branch content playback based on the connected state of Adobe Media Player. You can specify a block of AMODs to play when Adobe Media Player is online and completely separate block when it is offline. The <switch> element is used in tandem with a custom online attribute to accomplish this task.

The first step to conditionally branching content is to define an Adobe Media Player-specific online attribute in the AMOD header section (see Listing 11).

<head>
 ...
 <customTestAttributes>
  <online id="true" defaultState="false" uid="http://defs.adobe.com/AMP/online" />
  <online id="false" defaultState="true" uid="http://defs.adobe.com/AMP/offline" />
 </customTestAttributes>
</head>

Listing 11. Defining online/offline attributes

This allows you specify an online attribute on any AMOD element. When placed inside a <switch> block, the element is rendered only if the current state of Adobe Media Player matches the value specified in the online attribute. An example is provided in Listing 12. If Adobe Media Player is online, online.jpg appears in the banner region, whereas if it is offline, offline.jpg appears.

<switch>
 <img online="true" region="banner" src="http://www.mysite.com/online.jpg" dur="5s"/>
 <img online="false" region="banner" src="http://www.mysite.com/offline.jpg" dur="5s"/>
</switch>

Listing 12. Sample conditional content

Now that you have a grasp on conditional content, let's build upon Sample 3 to incorporate conditional branching. We will update the AMOD such that the banner, logo, and overlayAd content will only display when Adobe Media Player is online.

  1. Copy and paste Listing 13 into a blank text file. Save the file as Sample4.smil and upload the file to a web server. Note the URL for use in the next step.

    <smil xmlns="http://www.w3.org/2005/SMIL21/Language">
<head>
  <layout>
    <region id="banner" />
    <region id="content" />
    <region id="logo" />
    <region id="overlayAd" />
  </layout>
  <customTestAttributes>
    <online id="true" defaultState="false" uid="http://defs.adobe.com/AMP/online" />
    <online id="false" defaultState="true" uid="http://defs.adobe.com/AMP/offline" />
 </customTestAttributes>
</head>
<body>
  <seq>
   <par>
    <video region="content" src="http://demo20.panachetech.com/amparticle/content2.flv" dur="31s">
     <param name="skippable" value="no" valuetype="data"/>
    </video>
    <switch>
     <par online="true">
      <img region="banner" src="http://demo20.panachetech.com/amparticle/banner2.gif" link="http://www.apple.com/iphone" dur="31s"/>
      <img region="logo" src="http://demo20.panachetech.com/amparticle/logo2.jpg" link="http://www.apple.com/iphone" dur="31s"/>
      <seq>
       <img region="overlayAd" src="http://demo20.panachetech.com/amparticle/overlay2.png" link="http://www.apple.com/iphone" dur="15s"/>
       <img region="overlayAd" src="http://demo20.panachetech.com/amparticle/overlay3.png" link="http://www.apple.com/iphone" dur="15s"/>
      </seq>
     </par>
    </switch>
   </par>
   <par>
    <video region="content" src="http://demo20.panachetech.com/amparticle/content1.flv" dur="120s" />
    <switch>
     <par online="true">
      <img region="logo" src="http://demo20.panachetech.com/amparticle/logo1.gif" link="http://www.hbo.com/conchords" dur="120s"/>
      <img region="banner" src="http://demo20.panachetech.com/amparticle/banner1.gif" link="http://www.hbo.com/conchords" dur="120s"/>
      <img region="overlayAd" src="http://demo20.panachetech.com/amparticle/overlay1.swf" link="http://www.hbo.com/conchords" dur="15s"/>
     </par>
    </switch>
   </par>
  </seq>
</body>
</smil>

    Listing 13. AMOD for Sample 4

  2. Update your existing RSS feed to accommodate the new Episode created in Step 1. Open Samples.xml and append the code in Listing 14 right after the <item> element corresponding to Sample 3. If you are using your own server, replace the url attribute of the <enclosure> element with the URL to the AMOD that you created in Step 1. Save the file and upload to a web server. Note the URL to the RSS file for use in Step 4.

      ...
  <item>
   <title>Sample 4</title>
   <description>Conditional Content</description>
   <guid>4</guid>
   <pubDate>Jul 1, 2008</pubDate>
   <enclosure url="http://demo20.panachetech.com/amparticle/sample4.smil" type="application/smil+xml"/>
  </item>
  ...

    Listing 14. Updated RSS feed for Sample 4

  3. Open Adobe Media Player and click My Favorites in the left-hand pane. Hover over the "Advertising Experiences for Adobe Media Player" feed and click the check box at the bottom-right of the item (see Figure 7). Click Remove at the bottom of the screen to remove the feed.
  4. Open Adobe Media Player and click My Favorites in the left-hand pane. Click Add RSS Feed at the bottom of the screen and enter the URL to the RSS feed created in Step 2.
  5. Click the newly added Show titled "Advertising Experiences for Adobe Media Player". There should now be four Episodes. Click the Episode titled "Sample 4" to play your AMOD.

Where to go from here

AMODs provide the framework for building rich advertising experiences for Adobe Media Player content—limited only by your imagination. Building complex AMODs manually, though, can be a time-consuming process with the potential for programming errors. To complement and expand upon the capabilities of Adobe Media Player, you can check out the out-of-the-box solution from Panache to create and sequence AMODs—visually eliminating all coding requirements. For more information, visit panachetech.com/adobemediaplayer or e-mail Panache at amp@panachetech.com.

About the author

Jonathan Tabak is the director of product development at Panache. His first foray into technology occurred at the age of 14 when he was featured at a conference as the youngest Visual C++ developer. Shortly thereafter, he joined Panther Software and kicked-off an 11-year career which included a variety of roles in software development, project management, and client management for Fortune 500 companies. Jonathan also founded the software consulting firm Periglobal, which specializes in data-driven web applications and websites for small-to-mid-sized companies. Jonathan currently manages Panache's products from both development and business standpoints. His extensive technical background and hands-on approach helps Panache build best-of-breed products.