<!-- <div class="container">
  <div class="video-container">
    <video id="SourceVideo" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" loop crossorigin="Anonymous">
  </div>

  <div class="video-container">
    <canvas id="Canvas" class="video"></canvas>
    <button id="Button">Invert Colors</button>
  </div>
</div> -->
  
  
<div class="container">
  <div class="column">
    <video id="SourceVideo" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" loop crossorigin="Anonymous"></video>
  </div>
  <div class="column">
    <div class="canvas">
       <canvas id="Canvas" class="video"></canvas>
    </div>
  </div>
</div>

<button id="StartButton">Start</button>
<button id="ToggleButton">Toggle Effect</button>
    

.container {
  display: flex;
  width: 400px;
  
  .column {
    max-width: 100%;
    flex: 0 0 400px;
  }
  
  video, canvas {
    max-width: 100%;
  }
  
  canvas {
    border: 1px solid #ccc;
  }
}

.video-container {
  width: 400px;
}

var startButton;
var canvas;
var context;
var video;
var canPlay;
var applyEffect;

function init() {
  startButton = document.getElementById('StartButton');
  toggleButton = document.getElementById('ToggleButton');
  canvas = document.getElementById('Canvas');
  context = canvas.getContext('2d');
  video = document.getElementById('SourceVideo');
  
  video.muted = true;

  if (video.readyState >= 3) {
    readyToPlay();
  } else {
    video.addEventListener('canplay', readyToPlay);
  }
  
  startButton.addEventListener('click', function () {
    console.log(canPlay);
    if (!canPlay) return;
    // Play video
    video.play();
    
    drawFrame(video);
  });
  
  toggleButton.addEventListener('click', function () {
    applyEffect = !applyEffect;
  });
}

function readyToPlay() {
  // Set the canvas the same width and height of the video
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  canPlay = true;
}

function drawFrame(video) {
  context.drawImage(video, 0, 0);
  
  if (applyEffect) {
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    invertColors(imageData.data);
    context.putImageData(imageData, 0, 0);
  }
  
  setTimeout(function () {
    drawFrame(video);
  }, 10);
}


function invertColors(data) {
  for (var i = 0; i < data.length; i+= 4) {
    data[i] = data[i] ^ 255; // Invert Red
    data[i+1] = data[i+1] ^ 255; // Invert Green
    data[i+2] = data[i+2] ^ 255; // Invert Blue
  }
}

window.addEventListener('load', init);