PonycornJS

Testing Popcorn.js for potential use in a project. http://redd.it/sxzye

by Santiago J

HTML

<script src="http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<div id="video"></div>
<div id="footnotes"></div>

<h2>Tags</h2>
<ol id="tag-list"></ol>

CSS

body {
    background-color: #333;
    color: #eee;
    font-family: calibri, arial, sans-serif;
}

a {
    color: #af0;
    text-decoration: none;
}

#video, #footnotes {
    text-align: center;
}

JavaScript

// Util
function selectEl(s, a, p) {
    p = p || document;
    return a ? p.querySelectorAll(s) : p.querySelector(s);
}

function makeEl(t, a, p) {
    var el  = document.createElement(t), i;
    for (i in a) {
        el[i] = a[i];
    }
    p && p.appendChild && p.appendChild(el);
    return el;
}

// Video tagging
var video;

function playAtFn(t) {
    return function() { video.play(t) };
}

function addTag(start, end, text) {
    if (typeof start !== "number" ||
        typeof end !== "number" ||
        typeof text !== "string") {
            return;
    }
    
    makeEl("a", {
        innerHTML: text,
        title: "["+start+"s, "+end+"s]",
        href: "#",
        onclick: playAtFn(start)
    }, makeEl("li", null, selectEl("#tag-list")));
    
    video.footnote({
        start: start,
        end: end,
        text: text + "<br>",
        target: "footnotes"
    });
}

var tags = [
    2, 4.1, "That pony reminds me of WoodenToaster",
    3, 4, "Applejack",
    4.5, 13.7, "Twilight Sparkle",
    5, 7, "TASTE THE MAGIC!",
    5, 7, "OM NOM NOM",
    6, 8, "Jingle bells, jingle bells,",
    8, 10, "Jingle all the way!",
    10, 13, "Oh what fun it is to ride in a one-pony open sleigh!",
    13.7, 14, "AAAAAAAAHWHUFIWDJKSFASDFSGH",
    13.7, 14, "Pinkie Pie",
    14, 20, "Twilight Sparkle",
    15, 20, "(tag)",
    15, 17, "(words)",
    18, 19, "(This video is silly)",
    20.2, 20.7, "fhiopa89w4984a8u9fAOWELOL",
    20.5, 20.7, "wigojg2-igja;mvCKLA0wiwmd",
    20.5, 20.8, "Trollestia",
    20.7, 21, "Boom."
];

// Initialize Popcorn
Popcorn(function() {
    video = Popcorn.youtube("#video", "http://www.youtube.com/watch?v=VE02VbaktC8");

    for (var i=0; i < tags.length; i+=3) {
        addTag(tags[i], tags[i+1], tags[i+2]);
    }

    video.play();
});