是否有可能将iframe元素嵌入到布景画布中，将youtube视频插入其中？

Question

我需要在人造画布上嵌入一个youtube视频。我已经尝试通过插入iframe元素到fabricjs图像对象来做到这一点。这对于我以前在画布中插入一个元素起了作用。但是，在插入iframe时是不可能的。

<input type="text" name="enlace-video" id="enlace-video-yt"  value="" placeholder="http://">
<button id="input-video-yt">
    Insert YT video
</button>

const ytVideo = document.getElementById('input-video-yt');
ytVideo.addEventListener('click', function (){

    var ytvideoURL = document.getElementById("enlace-video-yt").value;
    var embedURL = ytvideoURL.replace("watch?v=","embed/");

    var divVideo = document.createElement('div');
    document.body.appendChild(divVideo);

    var iframe = document.createElement('iframe');
    iframe.id="new-video";
    iframe.src = embedURL;
    divVideo.appendChild(iframe);

    iframe.addEventListener( "loadedmetadata", function (e) {
        
        var fab_video = new fabric.Image(iframe, {left: 100,   top: 50, data: "video"});
        canvas.add(fab_video);

    }, false );
});

任何能让youtube视频插入画布的其他方式都会对我有用。

Answer 1

要在画布中添加YouTube视频，您需要创建一个视频html标记并为YouTube视频链接分配源，然后将该视频添加到画布中，如

演示：http://fabricjs.com/video-element