JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:none"> 
        <video id="sourcevid" autoplay="true" loop="true"> 
            <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4" autoplay/> 
            <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.ogv" type="video/ogg" autoplay/> 
        </video>
    </div> 
<div id="videoCanvas"><canvas id="c1"></canvas><canvas id="c2"></canvas></div>

CSS

#videoCanvas canvas {
    display: inline;
}

JavaScript

var video;
var c1;
var c2;
var draw1;
var draw2;
var container;

var width=0;
var height=0;

function init(){
    video = document.getElementById('sourcevid');
    c1 = document.getElementById('c1');
    draw1 = c1.getContext('2d');
    c2 = document.getElementById('c2');
    draw2 = c2.getContext('2d');
    container = document.getElementById("videoCanvas");

    setInterval("processFrame()", 33);
}

function processFrame() {
    if(!isNaN(video.duration)){
        if(width == 0){
            width=video.videoWidth;
            height=video.videoHeight;
            setup();
        }
        //loop
        if(video.currentTime == video.duration){
            video.currentTime = 0;
        }
    }
    draw1.drawImage(video, 0, 0);
    draw2.drawImage(video, -1*width/2, 0)
}

function setup() {
    container.style.width=width+"px";
    container.style.height=height+"px";
    
    c1.width=width/2;
    c2.width=width/2;
    
    c1.height=height;
    c2.height=height;
}

init();