CODEWITHSUNDEEP
htmlcanvasvideoyoutube-apifabricjs
kaxi1993
kaxi1993

Reputation: 4710

Youtube video Inside canvas

I want to play youtube video inside canvas,I use fabric.js and youtube-api

my video tag code looks like this

<video id="youtube1" width="640" height="360">
    <source src="https://www.youtube.com/watch?v=V6DWnVm0Ufk" type="video/youtube" >
</video>

it works like expected video appears in dom but I want to add this video inside canvas too. my canvas code looks like this:

canvas = this.__canvas = new fabric.Canvas('canvas');
var youtube=$('#youtube1')[0];
var video1 = new fabric.Image(youtube, {
  left: 350,
  top: 300,
  angle: 0,
  originX: 'center',
  originY: 'center'
});
canvas.add(video1)
video1.getElement().play();
fabric.util.requestAnimFrame(function render() {
  canvas.renderAll();
  fabric.util.requestAnimFrame(render);
});

video does't appears in canvas

I want to know if it is possible to play youtube video inside canvas using fabricjs or other libraries? if yes how can i do it ?

Upvotes: 2

Views: 4459

Answers (1)

Rachel Gallen
Rachel Gallen

Reputation: 28593

Amend css as neccessary and obviously add video path! Reference You can convert a youtube vid into various formats using www.clipconverter.cc

document.addEventListener('DOMContentLoaded', function() {
  var v = document.getElementById('v');
  var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');

  var cw = Math.floor(canvas.clientWidth / 100);
  var ch = Math.floor(canvas.clientHeight / 100);
  canvas.width = cw;
  canvas.height = ch;

  v.addEventListener('play', function() {
    draw(this, context, cw, ch);
  }, false);

}, false);

function draw(v, c, w, h) {
  if (v.paused || v.ended) return false;
  c.drawImage(v, 0, 0, w, h);
  setTimeout(draw, 20, v, c, w, h);
}
body {
  background: black;
}
#c {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#v {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -180px 0 0 -240px;
}
<!DOCTYPE html>
<title>Video/Canvas Demo 1</title>

<canvas id=c></canvas>
<video id=v controls loop>
  <source src=video.webm type=video/webm>
    <source src=video.ogg type=video/ogg>

      <source src=video.mp4 type=video/mp4>
</video>

Upvotes: 1

Related Questions