Tiago's Weblog Code & Technology Aficionado – Come for the Flash, stay for more!

AMP: Creating your first feed

Welcome to a brand new series of tutorials, which are all about the upcoming release of Adobe's Media Player, short named AMP In this first tutorial I'm going to show you how to create your first channel on the next tutorial you are going to learn how to design your first Channel. Before we start, what's AMP?

AMP is not just only an FLV player, it's also a complete library of your videos, favourite channels, it even has a cataloge built in with hundreds of different channels like blip.tv, Universal Music, Motionbox and many many more, each channel is also separated with multiple channels giving you a lot of content to view. The great thing about this new product, is that you can create your own channel just like an RSS feed and publish it on your website, maybe you producting a cooking show series or even a learning course, AMP is one of the best ways to publish your content.

Let's start off by having a look at how a sample channel would look like, of course we're talking about code no graphics yet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

< ?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:amp="http://www.adobe.com/amp/1.0" 
xmlns:media="http://search.yahoo.com/mrss">
  <channel>
    <title>my first AMP channel</title>
    <link>http://localhost/amp_tutorial</link>
    <description>This is where your channel description is going to be.</description>
    <image>
      <title>A short title </title>
      <link>http://localhost/amp_tutorial</link>
    </image>
    <amp :publisherWatermark>http://localhost/amp_tutorial/img/</amp>
    <amp :logo>http://localhost/amp_tutorial/img/</amp>
    <amp :background>http://localhost/amp_tutorial/img/</amp>
    <amp :banner>http://localhost/amp_tutorial/img/</amp>
    <amp :halfBanner>http://localhost/amp_tutorial/img/</amp>
    <amp :networkLogo>http://localhost/amp_tutorial/img/</amp>
    <amp :networkWatermark>http://localhost/amp_tutorial/img/</amp>
    <amp :networkBackground>http://localhost/amp_tutorial/img/</amp>
    <amp :networkHalfBanner>http://localhost/amp_tutorial/img/</amp>
    <amp :networkWebsite>http://localhost/amp_tutorial/img/</amp>
    <item>
      <title>My first episode</title>
      <link>http://localhost/amp_tutorial/myVideo1.html</link>
      <description>Description of this episode</description>
      <pubdate>Tue, 28 Aug 2007 13:31:00 GMT</pubdate>
      <media :content type="video/x-flv" url="rtmp://localhost/amp_tutorial/vids/001.flv" 
isDefault="true" expression="full"/>
      <media :thumbnail url="http://localhost/amp_tutorial/thumbs/thumb1.jpg"/>
    </item>
<item>
      <title>My second episode</title>
      <link>http://localhost/amp_tutorial/myVideo2.html</link>
      <description>Description of this episode 2</description>
      <pubdate>Tue, 28 Aug 2007 13:31:00 GMT</pubdate>
      <media :content type="video/x-flv" url="rtmp://localhost/amp_tutorial/vids/002.flv" 
isDefault="true" expression="full"/>
      <media :thumbnail url="http://localhost/amp_tutorial/thumbs/thumb2.jpg"/>
    </item>
  </channel>
</rss>

Now that you have seen what's all about it, you should be pretty stunned about how easy it is to create an AMP channel, doesn't it look quite like a normal RSS or Podcast feed? Well it does, there are just a few things that are different from the others, but those are not very hard to learn, so let's move on to the learning part, I'm going to explain you what is responsible for what, on the code above.

1
2
3

<rss version="2.0" xmlns:amp="http://www.adobe.com/amp/1.0" 
xmlns:media="http://search.yahoo.com/mrss">
</rss>

The first line of code defines from where the feed grabs the namespaces also called references to the code below, in AMP's case we are getting part of the tags from Adobe and for the media tags from the yahoo Media RSS namespace.

1
2
3
4
5
6
7
8
9

<channel>
<title>my first AMP channel</title>
    <link>http://localhost/amp_tutorial</link>
    <description>This is where your channel description is going to be.</description>
    <image>
      <title>A short title </title>
      <link>http://localhost/amp_tutorial/img/networkLogo.jpg</link>
    </image>
</channel>

The next line is the channel definition the block where we start to define the properties of our channel, just followed by the title of the channel, the link to the website of the channel, and a short description about what our channel is all about. We can also define an image and an alt title for our channel, normally you would use your logo or the series logo in case you are on multiple shows, "be aware that AMP doesn't use the image as a channel image, it's only there for standardization matters".

1
2
3
4
5
6
7
8
9
10

<amp :publisherWatermark>http://localhost/amp_tutorial/img/</amp>
    <amp :logo>http://localhost/amp_tutorial/img/</amp>
    <amp :background>http://localhost/amp_tutorial/img/</amp>
    <amp :banner>http://localhost/amp_tutorial/img/</amp>
    <amp :halfBanner>http://localhost/amp_tutorial/img/</amp>
    <amp :networkLogo>http://localhost/amp_tutorial/img/</amp>
    <amp :networkWatermark>http://localhost/amp_tutorial/img/</amp>
    <amp :networkBackground>http://localhost/amp_tutorial/img/</amp>
    <amp :networkHalfBanner>http://localhost/amp_tutorial/img/</amp>
    <amp :networkWebsite>http://localhost/amp_tutorial/img/</amp>

Now let's have a look at these lines here, as you see those are all special tags used by AMP only, we have following components that we can change: Logo, Background, Banner, networkLogo, Watermark, networkBackground, HalfBanner and website. you can go check all the informations about it on the Adobe Wiki. I've put a small information table together for you guys as a short reference.

Logo: 250x250 px
Background: 1024x576 px
Banner: 686x60 px
HalfBanner: 234x60 px
NetworkLogo: 250x250 px

Here a detailed screenshot of which elements are being placed on AMP:

1
2
3
4
5
6
7
8
9

<item>
      <title>My first episode</title>
      <link>http://localhost/amp_tutorial/myVideo1.html</link>
      <description>Description of this episode</description>
      <pubdate>Tue, 28 Aug 2007 13:31:00 GMT</pubdate>
      <media :content type="video/x-flv" url="rtmp://localhost/amp_tutorial/vids/001.flv" 
isDefault="true" expression="full"/>
      <media :thumbnail url="http://localhost/amp_tutorial/thumbs/thumb1.jpg"/>
    </item>

The last bit of code is pretty simple and straight forward, the item node defines all the informations about ONE video, we have the title tag for your video, the link tag which you should link to the same video on your website, the description, pubDate is the publishing date remember that the newest date will be shown first so the ordering of the video's is by default newest to oldest.
the media tag belongs to the Yahoo Media RSS norm, content type defines which kind of object is being shown, in our case we're using FLV files, there are still not informations how the tag would look like for an H.264 video, but I'm pretty sure that it's being updated soon, the url to the video can be an http progressive download video or also an rtmp streaming video. isDefault is an optional attribute that defines if the video should be default in a group. Expression defines if the object is only a preview or a full version of the object. More information about the Yahoo Media RSS definitions can be found at their site

In our example I've used 2 items to show you how it would look like, you can copy and paste the complete code and use it for your own feed if you like, just keep in mind that you should define all the tags linking to the correct images and feeds.
If you ever worked with RSS feeds and Podcast feeds, this is not going to be much different, Adobe used pretty conformed tags, and the only difference is as mentioned the AMP tags which are also self explanatory.

With this I just need to show you now how to add your own feed to AMP for your local testing purposes.

1. Open AMP or if you haven't downloaded it yet go to labs.adobe.com
2. Click on the Favorites button
3. On the bottom part of AMP you'll find a button named Add Show click on it
4. Type in your feed's URL and press Ok.

That's it, your feed will now be displayed on your favorites tab.

On our next tutorial I'm going to show you how to style AMP to match your channel needs.

Download all files here