open-source-transcript-player-with-options

Overview

This React application provides a simple video player with a synchronized transcript display. Key features include:

Video playback with standard controls
Synchronized transcript display
Current word highlighting in the transcript
Video navigation by clicking on transcript words
Responsive interface with resizable split view

Data is loaded from a mock JSON file, which matches the typical format of the transcript data returned by a transcription API, in this case the

[/GET](https://doc.meetingbaas.com/api-reference#/bots-meeting_data)

route of Meeting Baas.

The project is under the MIT license, free to use and modify it.

For a full-featured example, including a back-end which stores the data, check out the Transcript Seeker repository.

Technologies Used

React
TypeScript
Chakra UI for styling
video.js for video playback

Main Components

App.tsx: Manages global state and layout
VideoPlayer.tsx: Wrapper for video.js
Transcript.tsx: Displays synchronized transcript
Card.tsx: Reusable component for content display

Here's a simple script that clones the code repo and launches the example:

Usage

The application loads a video and its transcript from mock data. Users can:

Play the video and see synchronized transcript
Click on words in the transcript to navigate the video
Resize the split between video and transcript on larger screens

Customization

The data structure in

fakedata.json

aligns with the Meeting Baas API

[/GET route](https://doc.meetingbaas.com/api-reference#/bots-meeting_data)

format. This structure is compatible with various transcription API outputs, facilitating integration with different services.

The

Transcript

component processes this data, rendering speaker information and individual words. It tracks the current playback time, highlighting the corresponding word and enabling navigation on word click.