JSFiddle - React, Tailwind, and code Playground
JavaScript
var videoElement = document.createElement("video");
videoElement.setAttribute("id", "vid");
videoSrc1 = document.createElement('source');
videoSrc2 = document.createElement('source');
videoSrc3 = document.createElement('source');
videoElement.appendChild(videoSrc1);
videoSrc1.setAttribute("src", "images/webobjects/3o.webm");
videoSrc1.setAttribute("type", "video/webm");
videoElement.appendChild(videoSrc2);
videoSrc2.setAttribute("src", "images/webobjects/3o.ogv");
videoSrc2.setAttribute("type", "video/ogg");
videoElement.appendChild(videoSrc3);
videoSrc3.setAttribute("src", "images/webobjects/3o.mp4");
videoSrc3.setAttribute("type", "video/mp4");
canvas = document.getElementById('can');
context = canvas.getContext('2d');
videoElement.addEventListener('play', function(){
context.drawImage(document.getElementById("vid"),0,0, canvas.width(), canvas.height());
},false);