What are the ways to draw video frame by frame in canvas?

Question

css

There are video projects in After Effects (sizes from 600x600px to 1920), who knows what ways there are to draw them frame by frame in canvas?
The only working option turned out to be exporting from After Effects to PNG Sequence and then loading all the frames into the js array, drawing through setTimeout iterating through the array.
Maybe someone knows if there are other options how to load videos without loading JS memory and be able to draw frame by frame in canvas?
ps I also tried with webm, but there the rewind does not work stably and the videos with the alpha channel are buggy

Answer 1

For example using svg:

<div class="box">
  <svg><line x1="0" y1="100%" x2="100%" y2="0" stroke-width="1" stroke="#fff"></line></svg>
</div>

.box {
  width: 100%;
  height: 500px;
  position: relative;
}

svg {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0;
}

JSBIN

Answer 2

Example

Answer 3

.box {
  position: relative;
  width: 100%;
  height: 500px;
}
.box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom right, transparent 50%, white 50%, white 50.1%, transparent 0);
}

Answer 4

And here is an example of working with video in canvas - they change the background on the fly .
Those. output from AfterEffects as a regular mp4 / h264 video.