react-native-interactive-transcripts v0.1.1

react-native-interactive-transcripts

Interactive Transcripts support in the react native. Supports (WEBVTT) , as of now (Work in progress)

Installation

npm install react-native-interactive-transcripts

Input Props

Callback

Usage

You can use the Transcripts with any player,example below is using - react-native-video

import InteractiveTranscripts from "react-native-interactive-transcripts";

// ...

<View style={styles.container}>
      <Video
        ref={(ref) => {
          player = ref; // player ref
        }}
        style={{ width: '100%', height: '30%', backgroundColor: 'skyblue' }}
        source={{
          uri:
            'https://html5multimedia.com/code/media/elephants-dream-medium.mp4',
        }} // Can be a URL or a local file.
        onProgress={progressCallback}
      />
      <InteractiveTranscripts
        currentDuration={duration}
        url={
          'https://html5multimedia.com/code/ch8/elephants-dream-subtitles-en.vtt'
        }
        seekToTranscriptDuration={(time) => { 
          player.seek(time); // seek to the clicked transcrpit start duration .
        }}
      />
    </View>
>

##Demo

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT