Youtube 视频内幕 canvas

Question

我想在 canvas 中播放 youtube 视频，我使用 fabric.js 和 youtube-api

我的视频标签代码是这样的

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

它的工作方式与 dom 中出现的预期视频一样，但我也想将此视频添加到 canvas 中。我的 canvas 代码如下所示：

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);
});

视频没有出现在 canvas

我想知道是否可以使用 fabricjs 或其他库在 canvas 中播放 youtube 视频？如果是，我该怎么做？

Answer 1

根据需要修改css明显添加视频路径！ Reference 您可以使用 www.clipconverter.cc

将 YouTube 视频转换为各种格式

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>

Youtube 视频内幕 canvas

Youtube video Inside canvas

html

canvas

video

youtube-api

fabricjs