Hello World, Part 4: Script and a Movie! [Part iv: The Script]

The light at the end of the tunnel! We've looked at the Playlist and the Manifest file, and the markup file, and now it's on to the actual script file. Anyone familiar with JScript programming for web pages (or WSH or other hosts) shouldn't have a problem following along here.

Script.js

Here's what the script file looks like. You can call it anything you want, as long as it ends in .js.

// Listen to the event we defined in the markup

addEventListener( "click" , onClick, false );

// Handler for the event

function onClick(evt)

{

  // Reference to the currently-running playlist

  var playlist = Player.playlist;

  // Reference to the list of chapters in the current title

  var chapters = playlist.currentTitle.chapters;

  // This is a very simple handler.

  // Based on the ID of the button that was clicked,

  // it performs an action.

  switch (evt.target.core.id)

  {

  case "play" :

    playlist.play();

    break ;

  case "pause" :

   playlist.pause();

   break ;

  case "chapter1" :

   chapters[0].jump( "00:00:00:00" , false );

   break ;

  case "chapter2" :

   chapters[1].jump( "00:00:00:00" , false );

   break ;

  case "chapter3" :

   chapters[2].jump( "00:00:00:00" , false );

   break ;

  }

}

 

 

Looking at the Code

The event-specific code is based on the W3C DOM 2 Events spec.

addEventListener

The addEventListener method is a global method injected into the script engine by iHD (just as the window object is injected into the script engine in a web page, or Request in an ASP page, or WScript in a WSH script, etc.). We give it the name of the event to listen to (note: we are not limited to any pre-defined event names; I could have called my event waffles and it still would have worked; click just seems more intuitive), a reference to the event handler function, and a boolean value that is used for more advanced operations (we'll just pass false for the time being).

function onClick(evt)

Standard ECMAScript function declaration that takes one argument named evt -- an Event object based off W3C. The object has been enhanced with some iHD-specific properties (such as the timecode when the event was fired) but we won't use any of that here.

Player Object

The Player object is another object injected into the global namespace. It represents the HD DVD player and exposes a bunch of properties and methods.

Playlist Object

The Player.playlist property returns a Playlist object, which has information specific to the playlist currently in effect. It too has various properties and methods.

Title Object

The Playlist.currentTitle property returns a Title object that represents (funnily enough) the title currently being watched. Bet you can't guess what the Title object has...

Chapter Object

The Title.chapters property returns an array of Chapter objects that represent the chapters in the title.

evt.target.core.id

This expression gets us the id of the object that initiated the event (ie, the thing that was clicked). evt is the argument passed in to the function. It has a target property which is a reference to the DOM object that fired the event. The DOM object has a core property, which contains all the "core" attributes of the element (ie, those without a style: or state: namespace). id is one of those attributes.

Playlist.play Method

The play method plays the video. Exciting!

Playlist.pause Method

The pause method opens a wormhole through the space-time continuum and allows you travel backwards in time.

Just kidding; it pauses the video.

Chapter.jump Method

The jump method jumps to a particular chapter. It takes two parameters -- the offset into the chapter to jump (typically it will be 00:00:00:00 to go to the start of the chapter) and a flag indicating whether the player should keep a temporary bookmark for the current position (so you can jump back to it later). Note this is different than the custom bookmarks you might have seen on Warner Bros. titles, which are permanently stored on the player.

That's it!

So, the upshot of all this is that when you click the buttons (either with the mouse or with the keyboard / remote) the following things happen:

·Blue button (originally red): Pause video

·White button: Play video

·Green button: Go to first chapter

·Yellow button: Go to second chapter

·Purple button: Go to third chapter

Stunning stuff, huh? If you missed it, the ZIP download is here. Remember to read the text files and copy across the appropriate files from your own machine first.

Wow, I'm done.