Video Loop with Logo Titles

VideoLoop.js

// Idea here is to have a background video looping different clips
// Each clip has a logo/title element that needs to be positioned separately from the video,
//    and each logo/title must only show while its clip is on screen.

var intro = document.getElementById('_intro');

//begin loading video to be able to listen for 'canplaythrough' event
intro.querySelector('video').load();

//canplaythrough chosen to prevent (as much as possible) video buffering
intro.querySelector('video').addEventListener('canplaythrough', startLoop);

function startLoop(){
    var IntroLoop = new VideoLoop(intro);
}

var VideoLoop = function(section, speed){ // speed only used if not a video

    var loopInterval,
        currentSection,
        currentSpeed,
        currentVid,
        clips = 5,
        clipLength,
        items;

    init();

    function init(){

        currentSection = section;

        // if section has a video, prepare video vars
        if ( $(currentSection).find('video').length > 0){

            currentVid = currentSection.querySelector('video');
            var vidLength = currentVid.duration;
            clipLength = vidLength/clips; //
            items = currentSection.querySelectorAll('.loop-item');
            currentVid.pause();

            playVideoLoop();
        } else {
            currentSpeed = speed; 
            clipLength = currentSpeed/1000;
            items = currentSection.querySelectorAll('.loop-item');

            logoLoop();
        }
    }


    //starts video and logo looping at same time to ensure they are synced
    function playVideoLoop(){
        currentVid.play();
        // currentVid.playbackRate = 2;
        logoLoop();
    };

    function logoLoop(){
    
        // instead of using setInterval, use currentTime of video
        currentVid.ontimeupdate = function(){
            showCurrentLogo();
        };

        function showCurrentLogo(){

            var cTime = currentVid.currentTime + 0.333; //first clip doesn't "start" til 0.333s

            //don't let it go past end
            if (cTime > currentVid.duration){
                cTime = currentVid.duration;
            }

            var cClip = Math.floor(cTime/clipLength); //current clip, index based

            //double check it doesn't go past end
            if (cClip > items.length - 1){
                cClip = items.length - 1;
            }

            //set current clip active based on time
            $(items).removeClass('active');
            items[cClip].classList.add('active');
        }
    };


};