Checking video status

video-loader.js

function loadVideo (video) {
    if (video && video.readyState === 4) {
        // If video is assembled and loaded
        $(video).addClass('is-loaded');
    } else {
        // Poll video to see if loadable
        setTimeout(function(){ loadVideo(video) }, 250);
    }

}


$('.video').on('click', function(){
    this.paused ? this.play() : this.pause();
});


// ORIGINAL SOURCE CODE

(function($) {
            
    $('#custom-vid').click(function(){
        console.log('you clicked it!');
        this.paused?this.play():this.pause();
    });

    function loadVideo(video) {

        if (video && video.readyState === 4) {
            video.play();
            $(video).removeClass('hidden');
            $(video).addClass('is-loaded');
            console.log('Done.');
        } else {
            setTimeout(function(){loadVideo(video) }, 250);
            console.log('Loading video...');
        }

    }

    function createVideo(videoData) {
        
        var $videoTag = $('<video>'),
            $videoWrap = $(videoData),
            id     = $videoWrap.attr('data-id'),
            src    = $videoWrap.attr('data-src'),
            codecs = $videoWrap.attr('data-codecs').split('|'),
            params = $videoWrap.attr('data-params').split('|'),
            fullsc = $videoWrap.attr('data-fullsc');

        $(params).each( function(i) {
            // Add paramaters to video tag
            $videoTag.attr(params[i], ' ');
        });

        $(codecs).each( function(i) {
            // Generate source tags per codec
            $('<source>').attr('src', src + '.' + codecs[i]).attr('type', 'video/' + codecs[i]).appendTo($videoTag);
        });

        $videoTag.attr('id', id).attr('class', 'hidden');
        $videoWrap.append($videoTag);

        // Return Dom Object of new video
        return document.getElementById(id);
    }


    function fireIfElementVisible (vp) { // If vpTarget is fully visible


        var vpVideo = vp.getElementsByTagName('video')[0],
            vpTarget = vp.getElementsByClassName('vp-target')[0];

        return function () {
            if ( isElementInViewport(vpTarget)) {
                if (vpVideo.currentTime === 0) {
                    vpVideo.play();
                    console.log('Play vidpic!');
                }
            } else {
                vpVideo.pause();
                console.log('Pause vidpic!');
                if (vpVideo.readyState === 4 && vpVideo.currentTime > 0) {
                    vpVideo.currentTime = 0;
                    }
            }
        }
    }


    function isElementInViewport (vpTarget) {
        var rect = vpTarget.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }


    var vpInstances = document.getElementsByClassName('vp-instance');

    for(var i = 0; i < vpInstances.length; i++) {
        
        var vp = vpInstances[i];
        createVideo(vp);

        var handler = fireIfElementVisible(vp);

            if (window.addEventListener) {
                addEventListener('DOMContentLoaded', handler, false); 
                addEventListener('load', handler, false);
                addEventListener('scroll', handler, false);
                addEventListener('resize', handler, false);
            }

        loadVideo(vp.getElementsByTagName('video')[0]);
    }

})(jQuery);