下载在React konva JS视频中不起作用

Question

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}
        />
    );
}

}

---

正如lavrton所建议，我正在使用以上代码在konva js中渲染视频。有用。但是，即使我允许从视频甚至从服务器进行跨域交互，当我尝试使用stage.toDataUrl（）进行下载时，它仍显示以下错误。不知道发生了什么！从源“ url”访问“ url / sample2.mp4”中的视频已被CORS策略阻止：所请求的资源上没有“ Access-Control-Allow-Origin”标头。

将不胜感激。

Answer 1

[您可能需要在设置crossOrigin属性之前尝试设置src：

video.crossOrigin = "Anonymous";
video.src = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';