JSFiddle - React, Tailwind, and code Playground

by OwenMelbz

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="400" width="600" id="background" autobuffer preload autoplay controls>
    <source src="http://owen.erupted.com/video/erupted.mp4"></source>
</video>
<div title="gallery">Gallery</div>
<div title="contact">Contact</div>
<div title="events">Events</div>
<div title="home">Home</div>
<div title="videos">Videos</div>

JavaScript

var video = Popcorn("#background");
var currentCue;
var transitionStopFrame;
var loopingFrame;
var currentPage = "contact";

var frame = function (smtpe) {
    return Popcorn.util.toSeconds(smtpe, 15);
};

var transition = {
    contact: {
        loop: {
            start: frame("00:00:00;00"),            end: frame("00:00:03;10")
        },
        events: {
            start: frame("00:00:04;00"),            end: frame("00:00:07;10")
        },
        gallery: {
            start: frame("00:00:08;00"),            end: frame("00:00:11;10")
        },
        home: {
            start: frame("00:00:12;00"),            end: frame("00:00:15;10")
        },
        videos: {
            start: frame("00:00:16;00"),            end: frame("00:00:19;10")
        },
    },
    events: {
        loop: {
            start: frame("00:00:40;00"),            end: frame("00:00:44;00")
        },
    },
    gallery: {
        loop: {
            start: frame("00:00:40;00"),            end: frame("00:00:44;00")
        },
    },
    home: {
        loop: {
            start: frame("00:00:40;00"),            end: frame("00:00:44;00")
        },
    },
    videos: {
        loop: {
            start: frame("00:00:40;00"),            end: frame("00:00:44;00")
        },
    }
}

loopingFrame = video.cue(transition[currentPage].loop.end, function () {
    video.currentTime(transition[currentPage].loop.start);
});

video.play();

$('div').click(function () {
    //find out where we're going
    var destination = $(this).attr('title');
    console.log(destination);
    //set the playhead to the segment that containst the start of the transition
    video.currentTime(transition[currentPage][destination].start);

    //video.removeTrackEvent(transitionStopFrame);
    //set a cue point at the end of the transition, ready for the new loop to get setup.
    transitionStopFrame = video.cue(transition[currentPage][destination].end, function () {
        video.pause();
        //once the...