reactjs - 如何向 React Konva Video Stage 添加控件

Question

嘿，所以我想播放一段视频作为我的 konva 舞台。我使用了沙盒中的一个示例，但我不知道如何向其中添加视频播放器控件。有人可以帮忙谢谢

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

Answer 1

画布上的此类视频没有常规控件，您曾经在插入 DOM 的视频中看到这些控件。

当您在画布上绘制视频时，它会像动画图像一样工作。没有其他的。

如果您想拥有控件，您可以：

1. 无需将视频绘制到画布中，只需<video />在 DOM 中的某处插入元素即可。您可以将其放置在具有绝对位置的画布顶部。
2. 或者使用 Konva/canvas API 手动绘制所有控件。绘制播放/暂停按钮，绘制进度条等。这可能是很多工作。