Accessibility

Table of Contents

  1. Introduction
  2. Building your first AMOD
  3. Deconstructing AMODs
  4. Working with content
  5. Sequencing content
  6. Using conditional content

Building advertising experiences for Adobe Media Player

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:

  • Plays an "unskippable" pre-roll video
  • Plays a constant banner and logo during the pre-roll playback
  • Rotates between two overlays during the pre-roll playback
  • Plays the main content video following the pre-roll video
  • Plays a constant banner, logo, and overlay during the main video playback

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.
Page 5 of 6
Previous Page
Next Page