在 React Player 中添加字幕？

Question

我正在尝试在 React Player 组件中添加字幕，这是 React Player 组件的代码

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

我不明白我做错了什么，因为它们没有出现在视频中。请帮忙

Answer 1

为您的字幕创建一个数组状态

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

yout Captions_arr 应该有这样的对象

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

从这个数组中提取你需要的部分，我将它映射到一个新数组中

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

映射后将此数组传递给您的反应播放器组件

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