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

Question

使用konva.js，您可以在画布上创建视频组件。在这里，您可以在docs (Canvas.html)中看到这个示例。

现在我使用vue-konva，没有组件在画布上创建视频。您需要使用v映像组件来完成它，但是我无法使它工作。有可能用vue-konva吗？

Answer 1

这是一个视频的小提琴与v-图像。

这是我找到的这个码箱的工作版本。

​

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/vue-konva@2.1.1/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>

​