JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="myFunction()" type="button">Toggle Video</button>
<br>
<div id="status">Going to play video1..</div>
<video id="myVideo" controls autoplay loop class="myvideo">
    <source id="mp4_src" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>

CSS

.myvideo{
    width: 200px;
    height: 200px;
}

JavaScript

var vid = document.getElementById("myVideo");
var statusElement = document.getElementById("status");
var currentlyPlaying = 1;
var currentlPlayingTime;

var src1 = "http://www.w3schools.com/html/mov_bbb.mp4";

var src2 = "http://www.w3schools.com/html/mov_bbb.mp4";

function myFunction() {
    currentlPlayingTime = vid.currentTime;
    if (currentlyPlaying === 1) {
        vid.src = src2;
        currentlyPlaying = 2;
        statusElement.innerText = 'Going to play video2..';
    } else {
        vid.src = src1;
        currentlyPlaying = 1;
        statusElement.innerText = 'Going to play video1..';
    }
    vid.load();
    vid.addEventListener('loadedmetadata', function () {
        vid.currentTime = currentlPlayingTime;
    }, false);
}