Fabricjs Youtube Video
Estou usando o fabricjs para carregar vídeos dentro do canvas, ele funciona bem com vídeos mp4 normais como este:
<canvas id="c" width="1024" height="600" style="border:1px solid black;" ></canvas>
<video width="350" height="220" id="video1" style="display: none">
<source src="http://html5demos.com/assets/dizzy.mp4">
<source src="http://html5demos.com/assets/dizzy.ogv">
</video>
var video1El = document.getElementById('video1');
var video1 = new fabric.Image(video1El, {
left: 270,
top: 250,
angle: -15,
originX: 'center',
originY: 'center',
centeredScaling: true
});
canvas.add(video1);
video1.getElement().play();
Mas agora estou tentando carregar vídeos do youtube dentro da tela, isso é possível?
O que posso fazer agora é levar o vídeo do youtube para um html5<video>
como na primeira abordagem para trazer vídeos para a tela, mas quando adiciono este vídeo do youtube carregado ao fabric, nada acontece ... aqui está o código que estou usando:
<canvas id="c" width="1024" height="600" style="border:1px solid black;" ></canvas>
<video width="350" height="220" id="video1" style="display: none">
<source src="http://html5demos.com/assets/dizzy.mp4">
<source src="http://html5demos.com/assets/dizzy.ogv">
</video>
<script>
(function() {
window.YoutubeVideo = function(id, callback) {
return $.ajax({
url: "get_video_info.php", //fix cross domain problem, just download the content of url with curl
method: "POST",
data: {url: "http://www.youtube.com/get_video_info?video_id=" + id},
dataType: "text"
}).done(function(video_info) {
var video;
video = YoutubeVideo.decodeQueryString(video_info);
if (video.status === "fail") {
return callback(video);
}
video.sources = YoutubeVideo.decodeStreamMap(video.url_encoded_fmt_stream_map);
video.getSource = function(type, quality) {
var exact, key, lowest, source, _ref;
lowest = null;
exact = null;
_ref = this.sources;
for (key in _ref) {
source = _ref[key];
if (source.type.match(type)) {
if (source.quality.match(quality)) {
exact = source;
} else {
lowest = source;
}
}
}
return exact || lowest;
};
return callback(video);
});
};
window.YoutubeVideo.decodeQueryString = function(queryString) {
var key, keyValPair, keyValPairs, r, val, _i, _len;
r = {};
keyValPairs = queryString.split("&");
for (_i = 0, _len = keyValPairs.length; _i < _len; _i++) {
keyValPair = keyValPairs[_i];
key = decodeURIComponent(keyValPair.split("=")[0]);
val = decodeURIComponent(keyValPair.split("=")[1] || "");
r[key] = val;
}
return r;
};
window.YoutubeVideo.decodeStreamMap = function(url_encoded_fmt_stream_map) {
var quality, sources, stream, type, urlEncodedStream, _i, _len, _ref;
sources = {};
_ref = url_encoded_fmt_stream_map.split(",");
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
urlEncodedStream = _ref[_i];
stream = YoutubeVideo.decodeQueryString(urlEncodedStream);
type = stream.type.split(";")[0];
quality = stream.quality.split(",")[0];
stream.original_url = stream.url;
stream.url = "" + stream.url + "&signature=" + stream.sig;
sources["" + type + " " + quality] = stream;
}
return sources;
};
}).call(this);
var youtubeId = "Q4-MnX5PfO8";
YoutubeVideo(youtubeId, function(video){
console.log(video.title);
var webm = video.getSource("video/webm", "medium");
console.log("WebM: " + webm.url);
var mp4 = video.getSource("video/mp4", "medium");
console.log("MP4: " + mp4.url);
//works fine, youtube video is loaded
$("<video id='video1' controls='controls'/>").attr("src", webm.url).appendTo("body");
//attept to wait some time to try to add to canvas, but doesnt work
setTimeout(function(){ alert("Hello");
var video1El = document.getElementById('video1');
alert(video1El);
var video1 = new fabric.Image(video1El, {
left: 270,
top: 250,
angle: -15,
originX: 'center',
originY: 'center',
centeredScaling: true
});
canvas.add(video1);
canvas.renderAll();
}, 5000);
});
</script>
Alguma ideia? Atenciosamente, Diogo