How to create a video component with vue-konva? - vue.js

Question

With konva.js you can create video components on your canvas. Here you can see the example in the docs (https://konvajs.org/docs/sandbox/Video_On_Canvas.html).
Now I'm using vue-konva and there is no component to create a video on the canvas. You need to do it with the v-image component but I am not able to make it work. Is it possible with vue-konva?

Answer 1

Here's a fiddle of a video working with v-image.
It's a working version of this codesandbox I found.
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>