JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <div id="theater">
    <video width="200"  height="60" id="video" src="https://rr2---sn-a5msen7l.googlevideo.com/videoplayback?expire=1641433607&ei=p_XVYdG0Dsj0yQXBkKigDw&ip=138.199.59.42&id=o-APtaxSm9aVf-a8ktsGhYEcmTsn4Vk4HD45pXP_ve0bld&itag=22&source=youtube&requiressl=yes&vprv=1&mime=video%2Fmp4&cnr=14&ratebypass=yes&dur=933.535&lmt=1641394024893077&fexp=24001373,24007246&c=ANDROID&txp=4432434&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AOq0QJ8wRAIgeCCUexUn549ouvJ2Mg2Q1N4Z7VLIr8TYb50jIDIxf6YCIFn50A9cVQf6vcY7otc2Rh4HH-rGx2ndEwTME_iLuO8w&rm=sn-5uh5o-f5f67l&req_id=135d76de178ea3ee&redirect_counter=2&cm2rm=sn-f5fk7l&cms_redirect=yes&mh=eu&mip=174.26.13.154&mm=34&mn=sn-a5msen7l&ms=ltu&mt=1641411634&mv=m&mvi=2&pl=16&lsparams=mh,mip,mm,mn,ms,mv,mvi,pl&lsig=AG3C_xAwRQIhAPchkpyjul9MQVK-HN_vFJh-35KYl1sYqvj1toV_YLxdAiAboJ4VoA4Iy8eW4Oh3dA1CNO5BA1CPc7-9waehGT-Ieg%3D%3D" controls="false"></video>
    <canvas id="canvas"></canvas>
    <label>
    <br />
  </div>

JavaScript

$(function() {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var video = document.getElementById('video');
  
  		// Add a listener to wait for the 'loadedmetadata' state so the video's dimensions can be read
		video.addEventListener('loadedmetadata', function() {
			// Calculate the ratio of the video's width to height
			ratio = video.videoWidth / video.videoHeight;
			// Define the required width as 100 pixels smaller than the actual video's width
			w = video.videoWidth - 100;
			// Calculate the height based on the video's width and the ratio
			h = parseInt(w / ratio, 10);
			// Set the canvas width and height to the values just calculated
			canvas.width = w;
			canvas.height = h;			
		}, false);

  video.addEventListener('play', function() {
    var $this = this; //cache
    (function loop() {
      if (!$this.paused && !$this.ended) {
        ctx.drawImage($this, 0, 0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
      }
    })();
  }, 0);
});