jquery - Fabricjs Youtube 视频

Question

我正在使用 fabricjs 在 canvas 中加载视频，它适用于像这样的普通 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();

但现在我正在尝试在 Canvas 中加载 youtube 视频，这可能吗？

我现在能做的就是将 youtube 视频转换为 html5 <video>就像第一种将视频带到 Canvas 上的方法一样，但是当我将这个加载的 youtube 视频添加到 fabric 时，没有任何反应......这是我正在使用的代码:

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

有什么想法吗？你的，迪奥戈

Answer 1

好的，我发现了我的愚蠢问题，我没有在 <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>');

现在我可以在 fabricjs 中使用 youtube 视频 =)