JSFiddle - React, Tailwind, and code Playground

by Krzysztof

HTML

<div id="video">
    <video controls="true" preload="metadata" style="width: 100%; height: 100%;" src=""></video>
</div>
<button id="stopInterval">stopInterval</button>

CSS

#video {
    width: 400px;
    height: 220px;
}

JavaScript

// Turn on your dev console F12 in Chrome and check "Disable cache" in "Network" tab, then watch
var index = 0;
var sources = [
    'http://rv.im-g.pl/1/18278/273905_Polska_Krolowa_WikingowH.mp4',
    'http://rv.im-g.pl/2/18216/273281_hbc2H.mp4',
    'http://rv.im-g.pl/6/18078/271903_dupek_na_waweluH.mp4',
    'http://rv.im-g.pl/9/17824/268050_czadowy3_27_04_15H.mp4',
    'http://rv.im-g.pl/2/17685/265754_historia_bez_reklamH.mp4',
    'http://rv.im-g.pl/5/17562/264160_CH_jagiellonskie_wychowanieH.mp4',
    'http://rv.im-g.pl/3/17524/263555_historia_bez_cenzury_05_03H.mp4',
    'http://rv.im-g.pl/5/17455/262390_historia_bez_cenzury_grunwaldH.mp4',
    'http://rv.im-g.pl/7/17362/261263_rosja_pod_butemH.mp4',
    'http://rv.im-g.pl/6/17297/260320_hbc_finalH.mp4',
];
    
var changeSource = function(src) {
    var $video = $("<video/>", {
        "css": {
            "width": "100%",
            "height": "100%"
        }
    });
    var video = $video[0];

    video.preload = "metadata";
    video.controls = true;

    // check all three methods of replacing video element
    $('#video').html(video);
    //$('#video').empty().html(video);
    //$('#video').find('video').remove().end().html(video);

    // set new source
    video.src = src;
    video.load();
    video.play();
}

// Change video src every 4 seconds
var videoLoop = setInterval(function() {
    var source = sources[index] ? sources[index] : sources[index = 0];
    index++;
    changeSource(source);
}, 4000);

// You can stop video loop if you get annoyed
$('#stopInterval').on('click', function() {
    clearInterval(videoLoop);
});