CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-reduxkonvajs
Khalid
Khalid

Reputation: 704

How would I add a video (.mp4, .mov) at Konva stage?

I want to add a video object, just like I add an image at Konva stage. The problem is when I add a video (a mp4 / mov file), it does not play that video. When I resize my browser window, I can see the video frame is moving. But when the browser window is not resizing, the video does not play. I am using React Konva.

Upvotes: 1

Views: 1479

Answers (1)

lavrton
lavrton

Reputation: 20288

Konva is not designed to work with video. But you can show video as image element, and then frequently update layer:

class MyVideo extends React.Component {
    constructor(...args) {
      super(...args);
      const video = document.createElement('video');
      video.src = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
      this.state = {
        video: video
      };
      video.addEventListener('canplay', () => {
        video.play();
        this.image.getLayer().batchDraw();
        this.requestUpdate();
      });
    }
    requestUpdate = () => {
      this.image.getLayer().batchDraw();
      requestAnimationFrame(this.requestUpdate);
    }
    render() {
        return (
            <Image
                ref={node => { this.image = node; }}
                x={10} y={10} width={200} height={200}
                image={this.state.video}
            />
        );
    }
}

Demo: http://jsbin.com/haxufutaxe/1/edit?js,output

Upvotes: 3

Related Questions