Beginning tvOS Development with TVML Tutorial

Playing Video

So far, we’ve got the page populated, and it looks great. Once again, think about the many things you would’ve done to get this layout to work with iOS frameworks. Apple really did a good job abstracting all the details by providing us with these fantastic templates to work with.

Let’s move on to implement the remaining two features for this app: cell selection, and media playback.

Selection Events

You may have noticed already, but pressing the enter key or clicking the Apple TV Remote gives the pressed down animation, but nothing else happens. Now you’re going to implement the necessary code to implement cell selection.

You’re going to have Presenter handle this. Add the following method to the Presenter class:

load: function(event) {
  //1
  var self = this,
  ele = event.target,
  videoURL = ele.getAttribute("videoURL")
  if(videoURL) {
    //2
    var player = new Player();
    var playlist = new Playlist();
    var mediaItem = new MediaItem("video", videoURL);

    player.playlist = playlist;
    player.playlist.push(mediaItem);
    player.present();
  }
},

1. The load method is responsible for cell selection. It is analogous to an @IBAction, where the event argument is similar to the sender argument. Each event has a target. For our purposes, the target refers to each lockup element. Remember, each lockup element represents our cells that display the video thumbnail, and they all have a videoURL property.
2. Displaying a media player is simple. The class Player of the TVJS framework provides all the media playback functionality. All you need is to add a playlist, and a mediaItem into the playlist. Finally, the player.present() will put the video on screen

Now that you’ve got the implemented the logic to respond to selection events, it’s time to actually hook it up to each cell! For the last time, head back to the application.js file, and add the following line in the App.onLaunch method:

App.onLaunch = function(options) {
  //...
  //inside resourceLoader.loadResource...
  var doc = Presenter.makeDocument(resource);
  doc.addEventListener("select", Presenter.load.bind(Presenter)); //add this line
  Presenter.pushDocument(doc);
  //...
}

The addEventListener method is analogous to hooking a button to an @IBAction. Build and run. Choose a video to play. You should be greeted by the media player:

You can download the completed tutorial project here: client and RWDevCon

Where to Go From Here?

You’ve covered a lot of ground today. You’ve learned the basic architecture of a tvOS client-server app. You’ve learned how to manage TVML, use TVJS, and use TVMLKit to connect to a server. For some of you, this is the first time you’ve handled XML and JavaScript files. You have a lot to be proud of!

If you enjoyed this tutorial, you should check out our book the tvOS Apprentice. With 28 chapters and 538 pages, the book teaches you everything you need to know to develop great apps for the Apple TV – whether you’re a seasoned iOS pro, or a web developer looking to leverage your skills to a new platform.

Are you excited about the future of tvOS? Please join us in the forum discussion below!