Youtube视频内部画布 [英] Youtube video Inside canvas
问题描述
我想在画布中播放YouTube视频，我使用fabric.js和 youtube-api
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>
它工作原理像预期的视频出现在dom，但我想添加这个视频内画布。我的画布代码看起来像这样：
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);
});
视频未出现在画布中
我想知道是否可以使用fabricjs或其他库在canvas中播放youtube视频？如果是的话，我该怎么办？
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 ?
推荐答案
修改css是必要的， 参考您可以使用www.clipconverter.cc
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>
这篇关于Youtube视频内部画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
