优酷视频在画布内

我想在画布内播放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 = 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);
});

视频未显示在画布中

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

根据需要修改css，并明显添加视频路径！参考您可以使用 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>

相关内容

最新更新

热门标签：