class MyVideo extends React.Component {
constructor(...args) {
super(...args);
const video = document.createElement('video');
video.src = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
this.state = {
video: video
};
video.addEventListener('canplay', () => {
videocrossorigin="anonymous"
video.play();
this.image.getLayer().batchDraw();
this.requestUpdate();
});
}
requestUpdate = () => {
this.image.getLayer().batchDraw();
requestAnimationFrame(this.requestUpdate);
}
render() {
return (
<Image
ref={node => { this.image = node; }}
x={10} y={10} width={200} height={200}
image={this.state.video}
/>
);
}
}
As suggested by lavrton, I'm using the above code to render video in konva js. It works. But, Even though I have allowed cross-origin from video and even from the server, it says the following error when I try to download using stage.toDataUrl(). Not sure what's happening!
Access to the video at 'url/sample2.mp4' from origin 'url' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Help would be appreciated.
