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