JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas" class="canvas"></div>

CSS

div.canvas {
    display:    table-cell;
    width:        1280px;
    height:        800px;
    background:    black;
    vertical-align:    middle;
}

div.canvas > video {
    display:    block;
    margin:        auto;
}

div.canvas > img {
    display:    block;
    margin:        auto;
}

JavaScript

$(document).ready(function () {
    var content            = ['http://farm8.staticflickr.com/7013/6520756879_9ecb4a18c2_b.jpg', 'http://xoya.de/site/assets/media/weihnachten_privat.mov', 'http://farm5.staticflickr.com/4074/5045670521_7ae8599ed1_m.jpg', 'http://xoya.de/site/assets/media/halloween.mov'];
    var canvas            = $('#canvas');
    var durationImage    = 1000;
    var srcImage        = '<img src="$" alt="">';
    var srcVideo        = '<video autoplay><source src="$" type="video/quicktime"></source></video>';
    var current            = -1;
    var regex        = /(?:\.([^.]+))?$/;
    
    function playNext() {
        ++current;    
        if (content.length == current) {
            current    = 0;
        }

        var source        = null;
        var file        = content[current];
        var extension    = regex.exec(file)[1];
        
        if ('jpg' == extension) {
            source        = srcImage;
            setTimeout(function() { playNext(); }, durationImage);
        }
        
        if ('mov' == extension) {
            source        = srcVideo;
        }
        
        if (null !== source) {
            source    = source.replace('$', file);
            canvas.html(source);

            if ('mov' == extension) {
                canvas.find('video').bind("ended", function() {
                    playNext();
                });
            }
        }
    }
    
    playNext();
});