JSFiddle - React, Tailwind, and code Playground

by l2aelba

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<video width="640" height="360" id="video" style="display: none" muted>
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv">
</video>

<canvas id="c" width="640" height="360" style="border:1px solid #ccc"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
var videoEl = document.getElementById('video');
var video = new fabric.Image(videoEl);

canvas.add(video);
video.getElement().play();

fabric.util.requestAnimFrame(function render() {
  canvas.renderAll();
  fabric.util.requestAnimFrame(render);
  
  var current_time = videoEl.currentTime;
  if(current_time >= 5) {
  	videoEl.pause();
    console.log(current_time);
  }
  
});