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

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

  • Comments 8

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.

  • I haven't find time to look into the codes, however I have a question to ask.

    After I self develop this files (my custom UI), can I actually need to burn this into a physical HD DVD (assuming there is a burner for a PC - will there be one???)? Then, I can run this directly on the toshiba machine?

    Any help, peter?
  • You can burn onto a normal red-laser DVD as well if you like. The harder part is getting your video in the correct format for HD DVD.

    These kinds of questions are better asked over at the forums:

    http://forums.microsoft.com/MSDN/ShowForum.aspx?ForumID=527&SiteID=1
  • Peter, do you have a list of what type of WMV is supported?  Bit depths, sizes, bitrates, etc?  I see that you use 1280x720 and 320x180 sizes that scale (?) to the aperture set in the manifest and playist.  

    I'm frequently finding that my own smaller files left-justify and don't scale properly in the playback window, and that larger files (by size and bitrate) tend to make the iHD not display buttons.  The latter videos are pretty hefty (5000kbps).
  • I don't know the specifics; the videos I use here are either the basic timecode videos that come with iHDSim download, or WMV trailers, or videos I have created myself. The videos I made myself were shot on a MiniDV Canon Elura and edited on Windows Movie Maker or Sony (yes, Sony :-) ) Vegas 6.

    In general it should stretch the video to fill the frame. Things like pixel aspect ratio and the size of the video probably have something to do with it. I know that neither Final Cut Pro nor Sony Vegas actually has preset defaults for 16:9 output TO A FILE (only to tape) and you have to manually set the pixel aspect ratio to 1.1851.

    iHDSim is not designed to be a playback engine (it's an iHD simulator) so video playback is not optimised. High bitrate video will be VERY choppy unless you have great hardware.
  • In this example and some others I have tried, I can get everything working (buttons, audio, nav) except the video isn't playing.

    I downloaded you examples and part4 gives me the same result - everything works except the video.  Any ideas?
  • I think I found the problem:

    In your example I changed:

    <Video track="1" />

    to:

    <Video track="1" streamNumber="1" />

    It now works.  I thought the omission was intentional and have been omitting it from my examples as well ;)

  • I don't think you need stream numbers for WMV files, but I could be wrong... the streamNumber is (I think) only for multiplexed streams in real EVOBs. I could be wrong though as I am at home without the spec right now...
  • Ahh you're right.  I think what is happening is the simulator just gets flaky and shows inconsistent behavior.  I now close and restart the sim every time I want to reload a playlist.

    All my samples are working without a stream designation in the video track.
Page 1 of 1 (8 items)