Fabricjs Youtube видео

Question

Я использую fabricjs для загрузки видео внутри холста, он отлично работает с нормальным mp4 видео, как это:

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

Но теперь я пытаюсь загрузить YouTube видео внутри холста, что возможно ?

Теперь я могу сделать видео youtube на html5 <video>, как в первом подходе к переносу видео на холст, но когда я добавляю это загруженное видео YouTube в ткань, ничего не происходит ... вот код i ' м с использованием:

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

Любые идеи? С уважением, Diogo

Answer 1

Ok нашел мою глупую проблему, я не заходило источник внутри <video>

просто изменить

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

в

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

Теперь я могу использовать YouTube видео внутри fabricjs =)