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.

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.

   

   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

Page 4 of 6

Previous Page

Next Page