ReactPlayer subtitle not showing

Question

I have a problem with ReactPlayer component. I'm trying to upload a subtitle(track) using config attribute and it isn't displayed onto the video.

I'm running this project on Chrome. In Networks I found out that my request was blocked with the error "blocked:origin" that's why I added:

attributes: {
    crossOrigin: 'true'
}

This is my ReactPlayer component:

<ReactPlayer
    url='video/myVideo'
    className="myClass"
    config= {
        file: {
            attributes: {
                crossOrigin: 'true'
            },
            tracks: [
                {kind: 'subtitles', src: 'subs/mySubtitle', srcLang: 'en', default: true}
            ]
        }
    }
/>

Also, I'm using React v16.2.0 and ReactPlayer v0.25.3.

Comprehensible

You might just be missing the .vtt src: 'subs/mySubtitle.vtt' – Horrific

Have you found a solution? – Termagant

Answer 1

same question !

 tracks:        [
                            {
                                kind: 'subtitles',
                                src: this.state.trackUrl,
                                srcLang: 'en',
                                default: true,
                            },

                        ]

Bowlds

Have you found a solution? – Termagant

Answer 2

Not sure if you ever found a solution, but this worked for me (if you use absolute paths):

    import introVideoText from 'assets/impacti_intro.vtt';

then

    config={{
              file: {
                tracks: [
                  {
                    kind: 'subtitles',
                    src: introVideoText,
                    srcLang: 'en',
                    default: true,
                  }
                ],
              },

Kathie