Setting Up Subtitles

Configuring subtitles using Custoplayer is quite easy.

There are two steps:

1. Add a track tag as a child to the Custoplayer tag
   • It should have a label set and have kind='metadata'
   • The src attribute should be set to a url that contains a vtt file.
     • This is where the subtitles info is held
     • The crossOrigin property will probably have to be set to "anonymous" for this to work
2. Add a settingsButton1 with the options object having subtitles: true

Code Example

import React from 'react';
import { Custoplayer } from 'custoplayer';

export default function SubtitlesExample() {
  return (
    <Custoplayer
      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-video-qualities/custoplayer-demo-1080.mp4'
      crossOrigin='anonymous'
      values={{
        controlsBar: {
          animate: 'movement',
          barColor: 'rgba(28, 28, 28, 0.85)',
        },
        item1: {
          id: 'settingsButton1',
          settingsMenuOrientation: 'right',
          options: {
            subtitles: true,
          },
        },
      }}
    >
      <track
        label='English'
        kind='metadata'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-subtitles/English.vtt'
        srcLang='en'
        default
      />
      <track
        label='Spanish'
        kind='metadata'
        srcLang='es'
        src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/setting-up-subtitles/Spanish.vtt'
      />
    </Custoplayer>
  );
}

Video Example