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