如何向 React Konva Video Stage 添加控件答案

【问题标题】：How to add controls to React Konva Video Stage如何向 React Konva Video Stage 添加控件
【发布时间】：2021-10-10 15:06:21
【问题描述】：

嘿，所以我想播放一段视频作为我的 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
      />
    );
  }

【问题讨论】：

标签： reactjs konvajs react-konva konva konvajs-reactjs

【解决方案1】：

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

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

如果你想拥有控制权，你可以：

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

【讨论】：