Youtube 视频画布内答案

【问题标题】：Youtube video Inside canvasYoutube 视频画布内
【发布时间】：2015-03-22 07:34:04
【问题描述】：

我想在画布内播放 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 视频？如果是，我该怎么做？

【问题讨论】：

标签： html canvas video youtube-api fabricjs

【解决方案1】：

根据需要修改 css 并添加视频路径！ Reference 您可以使用 www.clipconverter.cc 将 youtube vid 转换为各种格式

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>

【讨论】：