React Player subtitles are not showing

Question

I receive my subtitles dynamically from the remote API but I can't get them to show in my react-player

      <ReactPlayer
        width="100%"
        height="100%"
        url={src}
        controls={true}
        config={{
          file: {
            tracks: [
              {
                kind: 'subtitles',
                src: 'https://s3.eu-central-1.amazonaws.com/'path'/subtitles-test.vtt',
                srcLang: 'en',
                default: true,
                label: 'eng',
              },
            ],
          },
        }}
      />

I also tried adding crossOrigin: 'true' to the attributes property but that makes me unable to play the video (it just gets stuck at 00:00)

Adding subtitles locally works just fine

Answer 1

I see you are trying to access the .vtt file from an aws S3 bucket. When adding crossOrigin: 'true' to the attributes property, make sure that you update the CORS configuration on your S3 bucket to explicitly allow requests from the domain, from where you are trying to access this file (for example: 'http://localhost:3000").

Here's an example CORS configuration:

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["http://localhost:3000"],
    "ExposeHeaders": []
  }
]

It is important that you update the CORS configuration for all the S3 buckets, that your ReactPlayer component tries to access. So for example, if you have one bucket for hosting the video and another bucket for hosting the subtitle files, both need to have the CORS configurations updated accordingly.