JSFiddle - React, Tailwind, and code Playground

by FZambia

HTML

<body>
    <div class="video-preview" data-frames="100" data-source="http://i.imgur.com/iZY5Cac.jpg"></div>
    <div class="video-preview" data-frames="100" data-source="http://i.imgur.com/WojHPte.jpg"></div>
</body>

CSS

body {
    text-align: center;
    padding-top: 20px;
}

.video-preview {
    display: inline-block;
    position: relative;
    background: #ddd;
    overflow: hidden;
    /* This is temporary width and height, these'll be overriden when the source img is loaded. */
    /* If you already know size of a preview frame you can hardcode it here. */
    width: 160px;
    height: 200px;
    border-radius: 3px;
    box-shadow: 0 0 6px #bbb;
}

JavaScript

(function($) {
    $.fn.videoPreview = function(options) {
        return this.each(function() {
            var elm = $(this);
            var frames = parseFloat(elm.data('frames'));
            var img = $('<img/>', { 'src': elm.data('source') }).hide().css({
                'position': 'absolute',
                'left': 0
            }).appendTo(elm);
            
            var width;

            function defaultPos() {
                img.css('left', -width * frames / 4);
            }
            
            var step = 0;
            var timeout = 100;
            var reverse = false;
            var action = true;

            img.load(function() {
                $(this).show();
                width = this.width / frames;
                elm.css('width', width);
                defaultPos();
                //goForward();
            });
                        
            function goForward() {
                if (!action) {
                    return;
                }
                if (reverse) {
                    step -= 1;
                    if (step <= 0) {
                        step = 0;
                        reverse = !reverse;
                    }
                } else {
                    step += 1;
                    if (step >= frames-1) {
                        reverse = !reverse;
                    }
                }
                var shift = - step * width;
                img.css('left', shift);
                setTimeout(goForward, timeout);                
            }

            elm.mouseover(function(e) {
                action = true;
                goForward();
            }).mouseout(function(e) {
                action = false;
                defaultPos();
            });
            
            
        });
    };
})(jQuery);

$('.video-preview').videoPreview();