Synchronizing HTML Content with the Video

Microsoft DirectShow 9.0

Synchronizing HTML Content with the Video

This component is available for use in the Microsoft Windows 2000, Windows XP, and Windows Server 2003 operating systems. It may be altered or unavailable in subsequent versions.

By handling time code events from the disc, a Web application can synchronize HTML content to the video. For example, you can cause images or text on the page to change at specified points in the video. The following code snippet shows one way to synchronize JScript function calls to time code events:

//DVDTriggerPoints array holds frame count for each trigger. Must be in ascending order.
//Use timecode2frames() to convert timecodes (hh:mm:ss:ff) to total number of frames.

var DVDTriggerPoints = new Array(
  timecode2frames("01:15:24:00"), 
  timecode2frames("01:23:02:00"));

//DVDTriggerProcs array holds functions to be called at each trigger point defined in DVDTimePoints.
var DVDTriggerProcs = new Array(
  "showDogPic();",
  "showCatPic();");

//DVDTriggerIndex keeps track of current trigger (it indexes DVDTriggerPoints and DVDTriggerProcs).
var DVDTriggerIndex = 0;

//Handle DVD Events
function ProcessDVDEvent(EventCode, Param1, Param2) {
  switch (EventCode) {
     case EC_DVD_CURRENT_HMSF_TIME:
          if(MSWebDVD.CurrentDomain == 4) {  //Don't bother checking unless disc is playing.
             if (DVDTriggerIndex < DVDTimePoints.length) {  //Are there trigger points left to check?
                currentDVDTime = (MSWebDVD.DVDTimeCode2bstr(Param1));
                 if (timecode2frames(currentDVDTime)>= DVDTriggerPoints[DVDTimeIndex]) {
                     // if trigger point has passed, execute the associated function
                    eval(DVDTriggerProcs[DVDTimeIndex++]);
                 }
             }
          }
       break;
 
       // handle other events 
   }
}

function timecode2frames(timeCode) {

   if (timeCode != "undefined") {
       return timeCode.substring(0,2)*108000
       + timeCode.substring(3,5)*1800
       + timeCode.substring(6,8)*30
       + timeCode.substring(9,11);
   } else {
       return 0;
   }
}