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

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.

Page 6 of 6
Previous Page