HoloArchivists/react-srv3

React component to render YouTube SRV3 closed captions

react-srv3

React component to render YouTube SRV3 closed captions

View demo

Install

yarn add react-srv3

Usage

import { CaptionsRenderer } from 'react-srv3';

<CaptionsRenderer
  srv3="<?xml ..." // SRV3 XML string
  currentTime={0}  // Current video time in seconds
/>

Example

import React from 'react';
import { CaptionsRenderer } from 'react-srv3';

const VideoPlayer = () => {
  const [currentTime, setCurrentTime] = React.useState(0);
  const [captionsText, setCaptionsText] = React.useState('');

  React.useEffect(() => {
    fetch('<srv3 captions file>')
      .then(res => res.text())
      .then(setCaptionsText)
  }, []);

  return (
    <div style={{ position: 'relative', width: 640, height: 360 }}>
      <video
        src="video.mp4"
        style={{ position: 'absolute', width: '100%', height: '100%' }}
        onTimeUpdate={(e) => setCurrentTime(e.target.currentTime)}
      />
      <CaptionsRenderer srv3={captionsText} currentTime={currentTime} />
    </div>
  )
}

License

MIT © hizkifw