react-video-all-caption

A lightweight React video player with built-in support for multiple subtitle formats.

react-video-all-caption allows you to add captions to your videos using:

• SubRip (.srt)
• SubViewer (.sbv)
• WebVTT (.vtt)

SRT and SBV captions are automatically converted so they can be displayed by the browser's native video player.

Installation

Install the package using npm:

npm install react-video-all-caption

Usage

Import the video player into your React application and pass the required props:

import ReactVideoPlayer from 'react-video-all-caption';

function MyComponent() {
  return (
    <ReactVideoPlayer
      videopath="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
      autoplay={true}
      captionurl="/srtCaption.srt"
      embedurl=""
      loop={true}
      muted={true}
      playPause={true}
      type="videoPath"
      control={true}
    />
  );
}

export default MyComponent;

The captionurl can point to any of the supported caption formats:

captionurl="/captions.srt"
captionurl="/captions.sbv"
captionurl="/captions.vtt"

Vanilla JavaScript / Web Component

You can also use react-video-all-caption without React.

Using the browser bundle

<script src="https://unpkg.com/react-video-all-caption/dist/video-all-caption.min.js"></script>

Single Caption

<video-all-caption
  src="video.mp4"
  controls
  caption="captions.srt"
  caption-label="English"
  caption-lang="en"
>
</video-all-caption>

Multiple Captions

<video-all-caption src="video.mp4" controls>
  <video-caption
    src="english.srt"
    label="English"
    lang="en"
    default>
  </video-caption>

  <video-caption
    src="persian.sbv"
    label="فارسی"
    lang="fa">
  </video-caption>
</video-all-caption>

Supported caption formats:

• SRT (.srt)
• SBV (.sbv)
• WebVTT (.vtt)

Props

| Prop | Description | | ------------ | ---------------------------------------------------- | | videopath | URL or path to the video file | | captionurl | URL or path to an SRT, SBV, or VTT caption file | | autoplay | Enables automatic video playback | | loop | Loops the video | | muted | Mutes the video | | playPause | Enables the custom play/pause button when applicable | | control | Shows the native video controls | | type | Video type: videoPath or thirdPartyEmbed | | embedurl | HTML used when type is thirdPartyEmbed |

Captions

Place your caption file in your application's public folder and provide its path using the captionurl prop.

For example:

captionurl="/captions.srt"

Video Types

The type prop supports:

videoPath
thirdPartyEmbed

Use videoPath for regular video files or thirdPartyEmbed for embedded video content.

Sandbox

Try the package in CodeSandbox:

https://codesandbox.io/s/ecstatic-wing-zspyz4?file=/src/App.js

Contributing

For major changes, please open an issue first to discuss what you would like to change.

License

MIT