Cloudfront，无子域和受污染的画布

Question

两周以来，我们一直在尝试绘制画布以将HTML 5视频捕获为静止帧。 问题是文件是在子域上提供的，我们收到的变体无法在所有主流浏览器中绘制到受污染的画布。

该网站，比如mysite.com，读取存储在s3存储桶中的媒体文件，其中包含公共访问权限，跨源头文件，以及在Route53中使用cname，media.mysite.com设置的云端分发。带有别名为media.mysite.com的记录，指向云端分发。

Cloudfront配置为传递原始标头。

这是我们的一些代码：

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var videoElement = player.el().querySelector('video');
    videoElement.crossorigin = "anonymous";

    player.controlBar.takeSnapshot = player.controlBar.addChild( takeSnapshot );
    player.controlBar.takeSnapshot.on('click', function(){
        canvas.width = videoElement.videoWidth;
        canvas.height = videoElement.videoHeight;
        ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
        console.log(canvas.toDataURL('image/png'));
    });

在使用各种AWS服务进行所有配置之后，我们只能在Chrome中使用它，而在Safari中仍然失败。

Sooo ...如何在自己的网站上使用自己的资产，而不会在尽可能多的跨浏览器兼容性的情况下污染自己的画布？