S3に動画(mp4)、字幕(vtt)を配置して、CloudFront経由でクロスドメインで字幕付き動画を配信する

Safariは大丈夫だけれどもChromeやFirefoxはビデオの字幕ファイル(vtt)がCross-origin resource sharingに対応していないと読み込まれないようです。

以下はS3に配置したビデオと字幕ファイルをCloudFront経由で配信する際の設定項目のメモ。

S3側の設定

バケット→Permissions→Cross-origin resource sharing (CORS)
以下はどのドメインからでもリクエストできる設定。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

CloudFrontの設定

Origins→Behabiors→Cache key and origin requests→Legacy cache settings→Add header→Select headers→Origin

videoタグ

S3/CloudFrontの設定だけでなく、videoタグにはcrossorigin=”anonymous” が必要。

<video crossorigin="anonymous" preload="auto" controls="controls" width="640" height="360">
  <source src="https://videos.samuraism.com/ide-techniques/java17-nosubtitles.mp4" type="video/mp4" />
  <track kind="subtitles" src="https://videos.samuraism.com/ide-techniques/java17.vtt" srclang="ja" label="日本語" default="" />
</video>

動作確認

上記の設定で、Safari、Firefox、Chrome、WindowsのEdgeで字幕を表示出来るのを確認しました。