HTML5 Video Example JavaScript

script.js

var subtitles = ["Hello!", "I'm a cat!", "Goodbye!"];
var currentSubtitle = 0;
var subtitleInterval = 10;
var $subtitles = $('#subtitles');

var backgroundColors = ["blue", "red", "pink"];
var currentBackground = 0;
var backgroundInterval = 3;
var $body = $('body');

var $catgif = $('<img>')
    .attr({
        src:'http://www.catgifs.org/wp-content/uploads/2013/09/122_yawn_cat_gifs.gif',
        id: 'catgif'
    });
var catgifTimer = 20;

var $player = $('#player');

var videotime = 0;
var fps = 1000 / 24;

var spinvideo = false;
var videoRotate = 0;

function updateTime() {
    var oldTime = videotime;
    if(player && player.currentTime) {
      videotime = player.currentTime;
    }
    if(videotime !== oldTime) {
      onCue(videotime);
    }
    if (spinvideo) {
        videoRotate += 2;
        $player.css('transform', 'rotate('+videoRotate+'deg)');
    }
}
timeupdater = setInterval(updateTime, fps);


function onCue(currentTime) {
    if (currentTime > currentSubtitle * subtitleInterval) {
        $subtitles.text(subtitles[currentSubtitle]);
        if (currentSubtitle < subtitles.length) currentSubtitle++;
    }
    if (currentTime > currentBackground * backgroundInterval) {
        $body.css('background-color', backgroundColors[currentBackground%2]);
        currentBackground++;
    }
    if (currentTime > catgifTimer) $('#container').append($catgif);
}


$('#play').on('click', function() {
    player.play();
});
$('#stop').on('click', function() {
    player.pause();
    player.currentTime = 0;
});
$('#seek').on('click', function() {
    player.currentTime = 20;
});
$('#jump').on('click', function() {
    if (player && player.currentTime)
        player.currentTime = player.currentTime + 10;
});
$('#spin').on('click', function() {
    spinvideo = !spinvideo;
});