如何使用vue-konva创建视频组件？

Question

使用konva.js，您可以在画布上创建视频组件。在这里您可以在docs（https://konvajs.org/docs/sandbox/Video_On_Canvas.html）中看到示例。

现在，我正在使用vue-konva，没有任何组件可以在画布上创建视频。您需要使用v-image组件执行此操作，但我无法使其正常工作。 vue-konva是否可能？

Answer 1

这里是处理v图片的视频的小提琴。

这是我发现的此codesandbox的有效版本。

const width = window.innerWidth;
const height = window.innerHeight;

new Vue({
  el: "#app",
  data() {
    return {
      stageSize: {
        width: width,
        height: height
      },
      video: null,
      animation: null
    };
  },
  computed: {
    imageConfig() {
      return {
        image: this.video,
        x: 0,
        y: 0,
        width: 320,
        height: 180
      };
    }
  },
  methods: {
    play() {
      this.video.play();
      this.animation.start();
    },
    pause() {
      this.video.pause();
      this.animation.stop();
    }
  },
  mounted() {
    this.video = document.createElement("video");
    this.video.src =
 "https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm";

    this.layer = this.$refs.image.getStage().getLayer();
    this.animation = new Konva.Animation(() => {
      // do nothing, animation just need to update the layer
    }, this.layer);

    this.video.addEventListener("canplay", () => {
      this.play();
    });
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.2.2/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/vue-konva.min.js"></script>

<div id="app">
  <button @click="play">Play</button>
  <button @click="pause">Pause</button>

  <v-stage ref="stage" :config="stageSize">
    <v-layer ref="layer">
      <v-image ref="image" :config="imageConfig" />
    </v-layer>
  </v-stage>
</div>