Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.