How to Display Subtitles in React Video Players

This tutorial demonstrates two methods for displaying subtitles in video players using React. We'll cover both the native HTML element and the popular react-player library. Prerequisites Basic React knowledge A WebVTT subtitle file (.vtt) React project set up Method 1: Using Native HTML5 Video Element import React from 'react'; import subtitleFile from './output.vtt'; const VideoPlayer = () => { const videoUrl = 'your-video-url.mp4'; return ( ); }; export default VideoPlayer; Key points: Import subtitle file directly using your bundler Use element inside Essential attributes: kind="subtitles" srcLang for language code label for user display default for auto-enable Method 2: Using ReactPlayer Library First install the package: npm install react-player Implementation: import React from 'react'; import ReactPlayer from 'react-player'; import subtitleFile from './output.vtt'; const VideoPlayer = () => { const videoUrl = 'your-video-url.mp4'; return ( ); }; export default VideoPlayer; Key points: Uses react-player wrapper Configure through config.file.tracks prop Responsive container using padding technique Maintains aspect ratio with absolute positioning Important Notes Subtitle File Handling: Webpack/Vite will handle VTT files as static assets For public files, use relative paths ('/public/subtitles.vtt') CORS Requirements: Both video and subtitle files must be served from same origin Or have proper CORS headers if hosted externally Browser Support: Modern browsers support WebVTT natively Provide fallback text for older browsers Troubleshooting Subtitles Not Appearing: Check file paths are correct Verify server MIME type for .vtt is text/vtt Ensure CORS policies allow resource loading Encoding Issues: Save VTT files with UTF-8 encoding Validate VTT format with online validators React Player Specific: Ensure correct version (≥ 2.10.0) Verify network requests in browser devtools Conclusion Both methods provide reliable subtitle implementation. Choose: Native for simplicity and direct control ReactPlayer for additional features and format support Remember to test across browsers and provide multiple subtitle tracks for accessibility. This structure provides clear steps while maintaining technical accuracy. Would you like to expand any particular section or add visual examples?

Mar 27, 2025 - 13:09

How to Display Subtitles in React Video Players

This tutorial demonstrates two methods for displaying subtitles in video players using React. We'll cover both the native HTML element and the popular react-player library.

Prerequisites

Basic React knowledge
A WebVTT subtitle file (.vtt)
React project set up

Method 1: Using Native HTML5 Video Element

import React from 'react';
import subtitleFile from './output.vtt';

const VideoPlayer = () => {
  const videoUrl = 'your-video-url.mp4';

  return (
    <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
      <video 
        controls 
        style={{ width: '100%', height: 'auto' }}
      >
        <source src={videoUrl} type="video/mp4" />
        <track
          kind="subtitles"
          srcLang="en"
          label="English"
          src={subtitleFile}
          default
        />
      video>
    div>
  );
};

export default VideoPlayer;

Key points:

Import subtitle file directly using your bundler
Use element inside
Essential attributes:
kind="subtitles"
srcLang for language code
label for user display
default for auto-enable

Method 2: Using ReactPlayer Library

First install the package:

npm install react-player

Implementation:

import React from 'react';
import ReactPlayer from 'react-player';
import subtitleFile from './output.vtt';

const VideoPlayer = () => {
  const videoUrl = 'your-video-url.mp4';

  return (
    <div style={{ width: '100%', position: 'relative', paddingTop: '56.25%' }}>
      <ReactPlayer
        url={videoUrl}
        controls
        width="100%"
        height="100%"
        style={{ position: 'absolute', top: 0, left: 0 }}
        config={{
          file: {
            tracks: [
              {
                kind: 'subtitles',
                src: subtitleFile,
                srcLang: 'en',
                label: 'English',
                default: true,
              }
            ]
          }
        }}
      />
    div>
  );
};

export default VideoPlayer;

Key points:

Uses react-player wrapper
Configure through config.file.tracks prop
Responsive container using padding technique
Maintains aspect ratio with absolute positioning

Important Notes

Subtitle File Handling:

Webpack/Vite will handle VTT files as static assets
For public files, use relative paths ('/public/subtitles.vtt')

CORS Requirements:

Both video and subtitle files must be served from same origin
Or have proper CORS headers if hosted externally

Browser Support:

Modern browsers support WebVTT natively
Provide fallback text for older browsers

Troubleshooting

Subtitles Not Appearing:
- Check file paths are correct
- Verify server MIME type for .vtt is text/vtt
- Ensure CORS policies allow resource loading
Encoding Issues:
- Save VTT files with UTF-8 encoding
- Validate VTT format with online validators
React Player Specific:
- Ensure correct version (≥ 2.10.0)
- Verify network requests in browser devtools

Conclusion

Both methods provide reliable subtitle implementation. Choose:

Native for simplicity and direct control
ReactPlayer for additional features and format support

Remember to test across browsers and provide multiple subtitle tracks for accessibility.

This structure provides clear steps while maintaining technical accuracy. Would you like to expand any particular section or add visual examples?