JSFiddle - React, Tailwind, and code Playground

HTML

<div class='timecontrol region1 position'>
    <video duration='6' width="320" height="240" controls class='position'>
        <source src="http://stream.flowplayer.org/functional.mp4" type="video/mp4">
    </video>
    <video duration='6' width="320" height="240" controls class='position'>
        <source src="http://stream.flowplayer.org/bauhaus.mp4" type="video/mp4">
    </video>
</div>
<div class='timecontrol region2 position'>
    <img class='position' duration='10' src='https://placeimg.com/350/150/any'></img>
    <img class='position' duration='20' src='https://placeimg.com/350/150/animals'></img>
</div>
<div id='readyState'></div>

CSS

.position {
    position:absolute;
}
.region1 {
    position:absolute;
    top:0px;
    left:0px;
    height:320px;
    width:240px;
}
.region2 {
    position:absolute;
    top:px;
    left:320px;
    height:320px;
    width:100px;
    border:1px;
}

JavaScript

function checkContainer() {
    if ($('#readyState').is(':visible')) { //if the container is visible on the page
        $('.timecontrol').each(function () {
            change($(this).children());
        });
    }
}
function change(elements, index) {
    index = !index || index > elements.length - 1 ? 0 : index;

    var element = $(elements[index]);
    var timeframe = parseInt(element.attr('duration')) * 1000;
    element.siblings().hide();
    element.show();
    if (element[0].tagName.match(/video/i)) element[0].play();
    setTimeout(function () {
        element.hide(0);
        if (element[0].tagName.match(/video/i)) element[0].pause();
        change(elements, index+1); // recursively call this same functoin passing in the elements and the index of the next one up
    }, timeframe);

}
$(document).ready(function () {
   checkContainer();
    // $('video').eq(1)[0].play();
});