我有一个S3存储桶用于媒体文件存储,最重要的是用于mp4视频。所有这些都有一个web前端。(没有涉及CloudFront,由于额外的费用,我不想注册一个。)当浏览器遇到mp4视频的原始URL时,默认行为是在单击时播放mp4文件(无论是就地播放还是在新选项卡中播放,具体取决于
target
HTML标记)。然后,您可以从本机浏览器播放器下载视频,但这需要多次单击,我们有时会在播放列表中讨论40个视频,如果只下载视频,这将是一个巨大的生产力打击。
因此,用户需要一个下载按钮,可以下载视频而不是播放视频,这是可以理解的。经过几个小时的研究,我偶然发现
StreamSaver.js
这非常有效,我甚至可以给下载的视频起一个有意义的名字(运动员的名字、位置、球衣等等),而不是guid,但也有一个缺点:我遇到了CORS策略错误,比如
Access to fetch at 'https://sportsboardmedia.s3.amazonaws.com/uploads/video/{GUID}_{GUID}.mp4' from origin 'https://app.sportsboard.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
我的水桶从一开始就可供公众使用。经过一些研究后,我将我的bucket切换到静态网站托管模式(
as per this SO entry
),我还应用了CORS策略
advised by this SO entry
.
https://app.sportsboard.io/playerlocker/media/event/6272C5BE-CE03-4344-BED1-29369306C831/5e267f70-f1de-11e7-b8d3-f23c91087063/videos/
我也打开了一个AWS论坛帖子,但我听到的也是板球:
https://forums.aws.amazon.co/thread.jspa?messageID=991094#991094
现在我也打开了一个AWS IQ请求:
https://iq.aws.amazon.com/p/N3SFMRLKRH
https://youtu.be/Dy38JRI5-oU