How do I add “live thumbnails” or slideshow like thumbnails?

Question

I know what tack I would take.

I would clip for a specific amount of time and scale it to the size of my desired thumbnail. The video can be auto clipped or they can be clipped manually to ensure the most interesting pieces are captured.

HTML

<div class="video">
    <video class="thevideo" loop preload="none">
        <source src="https://wordpress.stackexchange.com/questions/353023/PATH/TO/FILE.mp4" type="video/mp4">
        <source src="PATH/TO/FILE.webm" type="video/webm">
        Your browser does not support the video tag.
    </video>
</div>

Javascript

 var figure = $(".video").hover( hoverVideo, hideVideo );

 function hoverVideo(e) { $('video', this).get(0).play();  }
 function hideVideo(e)  { $('video', this).get(0).pause(); }

CSS

.video {
    background-image: url('PATH/TO/FILE.jpg');
    height: HEIGHTpx;
    width: WIDTHpx;
    margin-bottom: MARGINpx;
}


video::-webkit-media-controls {
    display:none !important;  /* Hide Play button/controls on iOS */
}

Hope this helps.