gistfile1.js

// Copyright 2013 Soundslice LLC. License: BSD.

/* HTML example: ****************

<figure class="vid">
<video preload>
    <source src="/videos/help/playhead.mp4" type="video/mp4">
    <source src="/videos/help/playhead.webm" type="video/webm">
</video>
<p>To move the playhead, click in the timeline or drag the playhead’s diamond.</p>
</figure>

*********************************/

function classRegex(name) {
    return new RegExp('(?:\\s|^)' + name + '(?:\\s|$)');
}
function hasClass(el, name) {
    if ('classList' in el) { return el.classList.contains(name); }
    return classRegex(name).test(el.className);
}
function addClass(el, name) {
    if ('classList' in el) { return el.classList.add(name); }
    if (!hasClass(el, name)) { el.className += (el.className ? ' ' : '') + name; }
}
function removeClass(el, name) {
    if ('classList' in el) { return el.classList.remove(name); }
    if (hasClass(el, name)) {
        el.className = el.className.replace(classRegex(name), ' ').replace(/^\s+|\s+$/g, '');
    }
}
function setUpVideo(figure) {
    var vid = figure.getElementsByTagName('video')[0];

    // Add <div class="playpause"></div>
    var playpause = document.createElement('div');
    addClass(playpause, 'playpause');
    figure.insertBefore(playpause, vid);

    assign(vid,
        'click', function() {
            if (vid.paused) {
                vid.play();
                addClass(figure, 'active');
            }
            else {
                vid.pause();
                removeClass(figure, 'active');
            }
        },
        'ended', function() {
            // Insert a slight pause before putting the play button back,
            // so that it doesn't feel too abrupt.
            setTimeout(function() { removeClass(figure, 'active'); }, 700);
        }
    );
}

var figs = document.getElementsByTagName('figure');
for (var i = 0, len = figs.length; i < len; i++) {
    var fig = figs[i];
    if (hasClass(fig, 'vid')) {
        setUpVideo(fig);
    }
}