i am trying to add subtitles in React Player ponent , Here is the code for react player ponent

  <ReactPlayer
          url={vidData.media[0]}
          controls={true}
          width={"100%"}
          height={"auto"}
          playing={playVid}
          muted={true}
          className="react-workout-player"
          config={{
            file: {
              attributes: {
                crossOrigin: "true",
              },
              tracks: [
                {
                  kind: "subtitles",
                  src: ".vtt",
                  srcLang: "en",
                  default: true,
                },
              ],
            },
          }}
        />

i cant understand what i am doing wrong as they are not appearing on the video. kindly help

i am trying to add subtitles in React Player ponent , Here is the code for react player ponent

  <ReactPlayer
          url={vidData.media[0]}
          controls={true}
          width={"100%"}
          height={"auto"}
          playing={playVid}
          muted={true}
          className="react-workout-player"
          config={{
            file: {
              attributes: {
                crossOrigin: "true",
              },
              tracks: [
                {
                  kind: "subtitles",
                  src: "https://prod.fitflexapp./files/captions/2021/11/18/23-b2j0oOsJ.vtt",
                  srcLang: "en",
                  default: true,
                },
              ],
            },
          }}
        />

i cant understand what i am doing wrong as they are not appearing on the video. kindly help

• javascript
• reactjs
• video
• react-player

• Does this Answer help you? – VC.One Commented May 11, 2022 at 23:42
• this doesnt work either – Hamza Manan Commented May 12, 2022 at 6:28

1 Answer 1

Create a State for an array For your subtitles

const [captions_arr, setCaptions] = useState([]);

yout captions_arr should have objects like this

  {kind: 'subtitles', src: 'subs/subtitles.en.vtt', srcLang: 'en', default: true},

Extract the part which you need from this array , I mapped it in a new Array

    var mySubtitle_arr= captions_arr.map((v) => ({
    kind: v.kind,
    src: v.src,
    srcLang: v.file_lang_code,
  }));

After Mapping pass this array to your react Player ponent

 <ReactPlayer
            config={{
              file: {
                attributes: {
                  crossOrigin: "true",
                },
                tracks: mySubtitle_arr,
              },
            }}
            url={'YOUR_VIDEO_URL'}
            controls={true}
            width={"100%"}
            height={"auto"}
            playing={'YOUR_PLAYING_STATE'}
            muted={true}
           
          />