JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<video id="videoPlayer" controls>
<source id="source" src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
<br />
<button onclick="toggle()">toggle video source</button>
<script>
function toggle() {
if ($(this).attr('data-click-state') == 1) {
$(this).attr('data-click-state', 0)
document.getElementById("source").src = "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4";
document.getElementById("videoPlayer").load();
} else {
$(this).attr('data-click-state', 1)
document.getElementById("source").src = "http://techslides.com/demos/sample-videos/small.mp4";
document.getElementById("videoPlayer").load();
}
}
</script>