Jump cuePoints in a Video

This was another of those questions that was posted to me by a Flex user in Germany. Thought I’ll share it with all…

The person wants a way, by which you can jump from one cue point to another, in a video. While this is not difficult, I wanted to give a way to tap into all kinds of cue points in this way, namely the ones added thru AS, thru MXL and those which are encoded into the video using the Flash Video Encoder…

The application below has a video that has 3 embedded cuepoints (done during encoding time), 2 AS cuepoints and 2 MXML cuepoints. The following are the steps required…

1. Create a cueArray Object to hold the details of the cuePoints
2. On creationComplete, access the cuePoints property of VideoDisplay (which is an array), loop thru it and store the ‘time‘ property of the cuePoint into the cueArray object
3. Then, listen to the metadataReceived event on VideoDisplay and access myVD.metadata.cuePoints to get the embedded cuePoints. Do the same there… (Important: The metadata property on VideoDisplay is only available on Flex3. If you do not have Flex3, skip this step, or better still, go get it)
4. Once you have the cueArray ready, have an index property that keeps track of the index of the latest cuePoint fired. This is done by tapping into the cuePoint event and then updating the index as…
   index = cueArray.indexOf(event.cuePointTime);
5. When the user tries to jump to the next cue, set the playHeadTime from the appropriate index and you are done 🙂

CAUTION: What you need to remember here, is the way, the playHeadTime property works…

When you set playHeadTime to say 2.54s, the VideoDisplay tries to set this. But a video can seek only key-frames in a FLV (which is decided by the encoded video data rate on the FLV encoder. This decides the resolution of the FLV). So, even though you set the playHeadTime to 2.54s, it may seek to the closest key-frame in the FLV which may be 2s or 4s (depending on the resolution of encoding)

You can see it here in the app… First let the video play fully, so you can see where all the cue points are. Now, click the “Jump to Next Cue” button and compare the playHeadTime to the cuePoint time. You will not only see that they are different, but also 3 cuePoints at 2.347, 2.45 & 2.6s, all default to 3.5s due to the above design.

Here’s the application and the source (The FLV might take some time to load… its > 2MB in size)

Application | Source