时间戳

首页 > 解决方案 > 下载在 React konva JS 视频中不起作用

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

问题描述

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() 下载时，它也会显示以下错误。不知道发生了什么！
CORS 策略已阻止从源“url”访问“url/sample2.mp4”处的视频：请求的资源上不存在“Access-Control-Allow-Origin”标头。

帮助将不胜感激。

标签： javascripthtml5-videokonvajsreact-konva

解决方案

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

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

推荐阅读