下载在 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 中呈现视频。有用。但是，尽管我已经允许来自视频甚至来自服务器的 cross-origin，但当我尝试使用 stage.toDataUrl() 下载时，它会提示以下错误。不确定发生了什么！
CORS 策略已阻止从来源 'url' 访问位于 'url/sample2.mp4' 的视频：请求的资源上不存在 'Access-Control-Allow-Origin' header。

不胜感激。

Answer 1

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

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

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

Download not working in react konva JS video

javascript

html5-video

konvajs

react-konva