javascriptreactjsvideoreact-player

Adding subtitles in React Player?


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

  <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.com/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


Solution

  • 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 component

     <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}
               
              />