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);