Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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"]
}];
// 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>
<!-- 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>
$(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();
});
}
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment