是否可以在Fabricjs帆布中嵌入iFrame元素以将YouTube视频插入其中？

发布于 2025-01-27 02:43:22 字数 1061 浏览 6 评论 0原文

我需要将YouTube视频嵌入到Fabricjs画布中。我试图通过将iframe元素插入Fabricjs Image对象来做到这一点。这对我来说是为了将元素插入画布之前。但是，在插入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视频插入画布中的任何其他方式都对我有用。

原文

I need to embed a youtube video in a fabricjs canvas. I have tried to do this by inserting an iframe element into a fabricjs image object. This has worked for me to insert a element into the canvas before. However, when inserting an iframe it is not possible.

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

Any other way that makes it possible to insert a youtube video into the canvas would work for me.

分享到QQ

分享到微博