How to select video element in fabricjs canvas?

问题

I have created a video element in fabricjs with the following

 const videoE = document.createElement('video') as HTMLVideoElement;
        videoE.width = 240;
        videoE.height = 140;
        videoE.crossOrigin = 'anonymous';
        videoE.controls = true;
        videoE.id = idObject.toString();
            const source = document.createElement('source') as HTMLSourceElement;
            source.src = url;
            source.type = 'video/webm';
            videoE.appendChild(source);
            console.log(videoE);


        const fab_video =  this.fabricUtilsService.addVideo(videoE, {
            elementType: ElementType.Video,
            scaleX: 1,
            scaleY: 1,
            idObjet: idObject,
       }, url
        );

           canvas.add(fab_video);
           fab_video.getElement().play();


          fabric.util.requestAnimFrame(function render() {
                canvas.renderAll();
                fabric.util.requestAnimFrame(render);
            });

The video is correctly loaded and rendered to the fabricjs canvas. Now I have a button which should remove the video from the canvas. I have tried the following:

Removing the video from canvas Objects stops the animation. The video is not rendered to the canvas anymore, but the sound is still playing in the background.

Pausing the video first, then removing the video from canvas objects should give the desired result. I am unable to get the video element from the canvas objects though to pause it.

Is there another way to select the video element from the canvas and apply play/pause methods? Is there a better way to go about removing the video from the canvas

来源：https://stackoverflow.com/questions/61094391/how-to-select-video-element-in-fabricjs-canvas

标签

javascript

angular

fabricjs