Last week, I started with a quick explanation of how to get your computer and roku box ready to build and deploy your first channel.
Now let’s get down to lightly customizing some example roku code.
In Part 1 you set up an account on roku.com and agreed to the Developer’s Agreement. Now if you log in click on “Developer Site”, you’ll get a page with a few light purple boxes, and at the top one will say “Software Development Kit”. Download this entire SDK to your computer.
What we’re going to do is copy the existing “videoplayer” example to a version that is your own channel, with your own content. I decided to use the videos I have of my daughter as a starting point for creating a private channel I can share with my family.
In the SDK folder you just downloaded, go to examples/source. Copy the “videoplayer” folder to a new folder named whatever you’d like your channel to be called, in this case “mygirl”. This is a quick and dirty example, but it’ll work!
Now, hopefully you have a little photo editing software laying around on your computer. This may sound strange, but you won’t be able to proceed without creating your custom images for your channel! The guidelines are specific: the _hd_ format image must be 290 x 218 pixels in size, and the _sd_ format image must be 214 x 144 in size. Keep the names straight, because you’ll have to upload these files in the publishing process. We’re also going to have to refer to them by name in some of the code customizations.
Hopefully you have your own server or dropbox where you can place the videos you’ll want to display on your channel. On my personal webserver, I created a directory structure “mygirl/xml” and created a file called “categories.xml” with the following text inside of it:
<categories>
<category title="Toddler Cuteness" description="Watching her grow up"
sd_img="http://YOURSITE/images/girl_sd_poster.jpg"
hd_img="http://YOURSITE/images/girl_hd_poster.jpg">
<categoryLeaf title="August 2010" description="" feed="http://YOURSITE/xml/08_2010.xml"/>
</category>
</categories>
If you examine the xml code above, you’ll see a section called “categoryLeaf” that points to another xml file. Create another xml file in the same directory on your webserver where you put the categories.xml file. I used “08_2010.xml” because in this example leaf I just wanted to have videos from August of last year show up. Use the tag “<streamUrl></streamUrl>” for as many videos as you’d like to have show up.
<feed>
<resultLength>4</resultLength>
<endIndex>4</endIndex>
<item sdImg="http://YOURSITE/images/sd_profile.jpg" hdImg="http://YOURSITE/images/hd_profile.jpg">
<title>August 2010</title>
<contentId>10001</contentId>
<contentType>Talk</contentType>
<contentQuality>SD</contentQuality>
<media>
<streamFormat>mp4</streamFormat>
<streamQuality>SD</streamQuality>
<streamBitrate>1500</streamBitrate>
<streamUrl>YOURSITE/VIDEO_NAME.mp4</streamUrl>
</media>
<synopsis>August 2010</synopsis>
<genres>Clip</genres>
<runtime>1260</runtime>
</item>
</feed>
Open up the mygirl/source folder and open the categoryFeed.brs file. Modify the variable conn.UrlPrefix in the InitCategoryFeedConnection() function to point to the folder on your webserver where your category.xml file lives.
conn.UrlPrefix = "http://yourwebsite/xml"
Click here for Part 3, Packaging and Publishing.