Enable / disable captions using React-Player

Question

I'm using React-Player, and pretty new to this library. Here is my code where I'm using React-Player:

 <ReactPlayer
            ref={video}            
            url={[{ src: urlSrc, type: 'video/mp4' }]}                
            config={{
              file: {
                tracks: [
                  { kind: 'subtitles', src: urlSub, srcLang: 'en', 
                    default: true, label: "English" }               
                ]
            }}
          />

So my question is: How can I know if captions are playing? I'm looking for something like in HTML-

 if(video.textTracks[0].mode !== "showing")
     video.textTracks[0].mode = "showing";

Answer 1

Your urlSub should be. vtt file, for me is working file

<ReactPlayer playing controls url={RazorVideo} config={{ file: {

                        tracks: [
                            {kind: 'subtitles', src: vtt, srcLang: 'English', default: true,color:'orange'},
                        ]
                    }}}
                    onReady={() => console.log('ready')}
                    onStart={() => console.log('onStart')}
                    onPause={() => console.log('onPause')}
                    onEnded={() => console.log('onEnded')}
                    onError={() => console.log('onError')}
                    onPlay={() => {console.log('onPlay')}}

            />

vtt file is

WEBVTT

00:00:03.300 --> 00:00:05.400 Forecasting and planning has entered a new

00:00:05.500 --> 00:00:09.600 era which requires radically different challenge approaches.

00:00:10.100 --> 00:00:12.100 I'll use using challenges faced by

00:00:12.100 --> 00:00:13.400 some of our early customers.

00:00:14.500 --> 00:00:16.700 One of our special where customers replace

00:00:17.700 --> 00:00:20.000 80% of their product portfolio every year.

00:00:20.200 --> 00:00:23.100 Historical data for each new product is fast.

00:00:23.900 --> 00:00:25.700 Another is a disputer who has

00:00:25.700 --> 00:00:28.100 grown 1900% in three years.

00:00:28.200 --> 00:00:30.600 It is critically important to capture many

00:00:30.700 --> 00:00:33.300 different market dynamics to forecast their sales.

00:00:33.700 --> 00:00:36.400 Yet another has seen over 70% of their

00:00:36.400 --> 00:00:39.100 business transition to Amazon and need to be

00:00:39.100 --> 00:00:42.000 Proactive system that would provide daily actionables.

00:00:43.600 --> 00:00:45.400 To solve this, we built an

00:00:45.400 --> 00:00:47.800 intelligent forecasting and planning engine.

00:00:48.000 --> 00:00:50.500 Critical to our effort were multiple features.

00:00:50.700 --> 00:00:53.400 Incorporate multiple data sources seamlessly.

00:00:53.500 --> 00:00:57.300 However disparate their structure was build support

00:00:57.400 --> 00:01:00.300 for behavioral AI which models a channel's

00:01:00.300 --> 00:01:03.400 behavior carefully rather than blindly slap an

00:01:03.400 --> 00:01:08.400 AutoML model on incorporate human feedback allowing

00:01:08.400 --> 00:01:11.000 persistent adjustments and learning from them.

00:01:11.600 --> 00:01:15.000 Build a rapid feedback mechanism that enables

00:01:15.000 --> 00:01:17.200 pro response to challenges and opportunities.