H.264 Subtitles & Cue Points in Flash

http://jpdevries.com/blog/2010/06/cued-h-264-cue-points-in-flash/

Posted on June 3, 2010 by jpdevries

Recently I came across needing to utilize basic cue points in Flash. You can use cue points to trigger an event when something specific in a video happens, or easily create subtitles. Flash only natively supports cue points for .flv (which kinda makes sense) so you need something like this to use cuepoints with other video codecs.

I needed to use them for a H.264 video, so I wrote this class. It can play anything that NetStream.play() can, so any video flash can play.

I took a really nice VideoPlayer class that Larry Reynolds wrote and extended it to support cue points.

In this context, a cue point is an event with a unique name bound to a specific point in time in a video. In this example I'm using cue points to create subtitles.

You can download the source to this example here.

First, import the com.trycatch.media package

import com.trycatch.media.*;

Then you'll create a new SmartVideo object and pass the video width, video height, video url, and Vector of cue points in as parameters to the constructor. Then add your cue point listeners, and the SmartVideo to the display list so it will show up…and you're set!

var _cues:Vector. = new Vector.<VideoCue>(); _cues.push( 	new VideoCue('NICK_JUMPS','00:03'), 	new VideoCue('NICK_LANDS','00:04') );   var vp:SmartVideo = new SmartVideo(640,424,'nick_scorpion_2-desktop.m4v',_cues); vp.addEventListener('NICK_JUMPS',_handleCuePoint); vp.addEventListener('NICK_LANDS',_handleCuePoint); addChild(vp);

You handle your cue point notifications just like any other event.

private function _handleCuePoint(e:Event) : void {	 	switch(e.type) {	 		case 'NICK_JUMPS':		 		// do nick jumps stuff	 		break;   		case 'NICK_LANDS': 		// do nick land stuff 		break; 	} }

Note:
The SmartVideo Object doesn't care how you add your VideoCues to it, just that you do. You can use XML, or whatever you wish.

Interested to hear what you think!