jquery.videosync.js

/*! jQuery VideoSync
 *  https://github.com/MA3STR0/jquery-videosync
 *  Manipulates page content based on video playback time */
/*global document, jQuery*/

(function ($) {
    'use strict';
    $.fn.videosync = function () {
        return this.each(function () {
            var classIn = 'vs-in',
                classOut = 'vs-out',
                video = this,
                nodes = [],
                lastTime = -1,
                time;
            $('.vs').each(function () {
                var $this = $(this);
                nodes.push({
                    start: parseFloat($this.data('vs-in-time')),
                    end: parseFloat($this.data('vs-out-time')),
                    classIn: $this.data('vs-in-class'),
                    classOut: $this.data('vs-out-class'),
                    element: $this
                });
            });
            video.addEventListener('timeupdate', function () {
                var node, i;
                time = parseFloat(video.currentTime);
                if (Math.abs(time - lastTime) < 0.1) {
                    return;
                }
                lastTime = time;
                for (i = 0; i < nodes.length; i += 1) {
                    node = nodes[i];
                    if ((!node.element.hasClass(classIn)) && (time >= node.start) && (node.end ? time < node.end : true)) {
                        node.element.removeClass(classOut);
                        node.element.removeClass(node.classOut);
                        node.element.addClass(node.classIn);
                        node.element.addClass(classIn);
                    } else if ((node.element.hasClass(classIn)) && ((time < node.start) || (node.end ? time >= node.end : false))) {
                        node.element.removeClass(node.classIn);
                        node.element.removeClass(classIn);
                        node.element.addClass(classOut);
                        node.element.addClass(node.classOut);
                    }
                }
            }, false);
        });
    };
    $(document).ready(function () {
        $('video.vs-source').videosync();
    });
}(jQuery));