Subtitles

WebVTT subtitle support with CC toggle, customizable settings panel, and dynamic track loading.

Standard VTT Track

Click the CC button to toggle subtitles. Use the gear icon to customize font size, color, background, and position. Settings persist in localStorage.

Dynamic Track (Programmatic API)

Subtitle track added after player initialization via addSubtitleTrack(). This mirrors how Impossible.io auto-derives a VTT URL from the render token.

Source code

<link rel="stylesheet" href="https://cdn.impossible.io/fxplayer/v3/fxplayer.css" />
<script src="https://cdn.impossible.io/fxplayer/v3/fxplayer.js"></script>

<!-- Player 1: VTT track at construction -->
<div id="player1" style="width: 720px; aspect-ratio: 16/9;"></div>

<script>
  const player1 = new fxplayer.FXPlayer('player1', {
    src: 'https://example.com/video.mp4',
    controls: true,
    subtitles: {
      storageKey: 'myapp',
      tracks: [
        { src: 'captions-en.vtt', srclang: 'en', label: 'English', default: true },
        { src: 'captions-es.vtt', srclang: 'es', label: 'Spanish' },
      ],
    },
  });
</script>

<!-- Player 2: Add track dynamically -->
<div id="player2" style="width: 720px; aspect-ratio: 16/9;"></div>

<script>
  const player2 = new fxplayer.FXPlayer('player2', {
    src: 'https://example.com/video.mp4',
    controls: true,
    subtitles: { storageKey: 'myapp_dynamic' },
  });

  // Add a subtitle track after initialization
  player2.addSubtitleTrack({
    src: 'https://example.com/captions-en.vtt',
    srclang: 'en',
    label: 'English',
    default: true,
  });
</script>