Fabricjs Youtube Video

Question

I'm using fabricjs to load videos inside canvas, it works fine with normal mp4 videos like this:

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

But now i'm trying to load youtube videos inside canvas, is that possible?

What I can do now is bring the youtube video to a html5 <video> as in the first approach to bring videos to canvas but when I add this loaded youtube video to fabric, nothing happens... here is the code i'm using:

<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>

Any ideas? Yours, Diogo

Answer 1

Ok found the my silly problem, I was not setting the source inside <video>

just change

$("<video id='video1' controls='controls'/>").attr("src", webm.url).appendTo("body");

to

$('body').append('<video width="350" height="220" id="video2" style="display: none"><source src="'+mp4.url+'"></video>');

Now I can use youtube videos inside fabricjs =)