CODEWITHSUNDEEP
reactjskonvajsreact-konvakonvakonvajs-reactjs
tanmya
tanmya

Reputation: 103

How to add controls to React Konva Video Stage

hey so I wanted to play a video as my konva stage. I used an example from sandbox but I cant figure out how to add the video player control to it.Can somebody help Thanks

  constructor(...args) {
    super(...args);
    const video = document.createElement("video");
    video.src = Vid;
    video.type = "video/mp4";
    video.controls = true; //I tried adding controls here
    this.state = {
      video: video,
      timestamps: [],
    };
    video.addEventListener("canplay", () => {
      video.play();
      this.image.getLayer().batchDraw();
      this.requestUpdate();
    });
   // video.addEventListener("keydown", () => {
      //video.pause();
   // });
  //}
  requestUpdate = () => {
    this.image.getLayer().batchDraw();
    requestAnimationFrame(this.requestUpdate);
  };


  render() {
    return (
      <Image
        ref={(node) => {
          this.image = node;
        }}
        height={window.innerHeight}
        width={window.innerWidth}
        image={this.state.video}
        controls
      />
    );
  }

Upvotes: 0

Views: 473

Answers (1)

lavrton
lavrton

Reputation: 20373

Such video on the canvas doesn't have regular controls, that you used to see on video inserted inside DOM.

When you draw video on the canvas, it works as an animated image. Nothing else.

If you want to have controls you can:

  1. Instead of drawing video into the canvas, just insert <video /> element somewhere in the DOM. You can place it on top of the canvas with absolute position.
  2. Or draw all controls manually with Konva/canvas API. Draw play/pause buttons, draw progress bar, etc. That may be a lot of work.

Upvotes: 0

Related Questions