Code snippets from blog post: http://anthonydecena.com/articles/update-flash-cue-points-with-html5-and-popcornjs/

cuepoints.js

// Before the closing body tag, either add a script block or create an external js file with the cue point data
var cue_points = [{
 time: "21",
 copy: "Ensure lips are their most smooth and supple by using a generous layer of Lip Conditioner.  Exfoliate them if necessary. Allow Lip Conditioner to \"marinate\" for several minutes.  Then thoroughly blot away excess.",
 prods: ["CAT960PROD472SKU4920", "CAT960PROD645SKU3165"]
},
{
 time: "38",
 copy: "Apply lip primer on entire mouth and slightly outside of natural lip line.",
 prods: ["CAT960PROD968SKU3830"]
},
{
 time: "45",
 copy: "\"Erase\" the natural lip using a thin layer of foundation, concealer or face powder. ",
 prods: ["CAT960PROD964SKU3836", "CAT960PROD251SKU3946", "CAT960PROD265SKU5397"]
},
{
 time: "63",
 copy: "Using a finely sharpened red lip pencil, use short, soft strokes to create a clean edge. Make sure the lips look even and symmetrical. Fill in the entire lip with the red pencil before layering lipstick",
 prods: ["CAT960PROD340SKU2916"]
},
{
 time: "96",
 copy: "Apply a complementary red lipstick colour using creamy or matte textures. Try cocktailing lipsticks to create your own personalized shade of red. ",
 prods: ["CAT960PROD310SKU3175", "CAT960PROD310SKU3184", "CAT960PROD287SKU5388"]
},
{
 time: "128",
 copy: "To get the edges clean and picture perfect, use a small firm, angled or flat brush loaded with a bit of concealer to clean up smudges. Follow by lightly powdering the edges.",
 prods: ["CAT960PROD964SKU3836", "CAT960PROD289SKU5390", "CAT960PROD251SKU3946", "CAT960PROD380SKU5395"]
},
{
 time: "146",
 copy: "Achieve this look with the products and shades listed below.",
 prods: ["CAT960PROD472SKU4920", "CAT960PROD645SKU3165",
 "CAT960PROD968SKU3830",
 "CAT960PROD964SKU3836", "CAT960PROD251SKU3946", "CAT960PROD265SKU5397",
 "CAT960PROD340SKU2916",
 "CAT960PROD310SKU3175", "CAT960PROD310SKU3184", "CAT960PROD287SKU5388",
 "CAT960PROD964SKU3836", "CAT960PROD289SKU5390", "CAT960PROD380SKU5395"]
}];

head.js

// Add the required script tags to the head of your HTML5 document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="js/popcorn.min.js"></script>
<script src="js/popcorn.code.js"></script>

markup.html

<!-- Add video element and tips/products div to the content section of the page. //-->
<video id="video_player" width="444" height="250" preload="auto" poster="images/poster_image.jpg">
 <source src="video.mp4" />
 <source src="video.ogv" />
</video>

<div id="tips"></div>
<div id="vid_prods">
 <img src="images/PROD472.png" id="video_PROD472">
 <img src="images/PROD968.png" id="video_PROD968">
 <img src="images/PROD265.png" id="video_PROD265">
 <img src="images/PROD340.png" id="video_PROD340">
 <img src="images/PROD310.png" id="video_PROD310">
 <img src="images/PROD287.png" id="video_PROD287">
 <img src="images/PROD289.png" id="video_PROD289">

 <img src="images/PROD380.png" id="video_PROD380">
 <img src="images/PROD251.png" id="video_PROD251">
 <img src="images/PROD964.png" id="video_PROD964">
</div>

run.js

$(document).ready(function() {
	var p = Popcorn('#video_player'),
		last = cue_points.length-1,
		tips_div = $('#tips'),
		prods_div = $('#vid_prods'),
		sku_id;

	$.each(cue_points, function(idx, cue) {
		p.code({
			start: cue.time * 1,
			end: (idx == last) ? 9999 : (cue_points[idx+1].time * 1) - 1,
			onStart: function() {
				tips_div.html(cue.copy);

				$('img', prods_div).hide();
				$.each(cue.prods, function(ix, sku) {
					sku_id = sku.replace(/CAT960/gi,'').replace(/SKU\d{4}/,'');
					console.log("skuid: ",sku_id);
					$('#video_'+sku_id).show();
				});
			}
		});
	});
});