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

Question

使用 konva.js，您可以在 Canvas 上创建视频组件。您可以在此处查看文档中的示例 (https://konvajs.org/docs/sandbox/Video_On_Canvas.html)。

现在我正在使用 vue-konva 并且没有组件可以在 Canvas 上创建视频。你需要用 v-image 组件来做，但我不能让它工作。 vue-konva可以吗？

Answer 1

这是一个使用 v-image 的视频的 fiddle 。

这是 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/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>