Captions

This page describes how to manage captions and subtitles in the Bambuser player.

Overview

The Bambuser player supports displaying captions and subtitles to enhance accessibility and viewer experience. From React Native you can:

• Show or hide captions
• Retrieve a list of available caption tracks
• Select a specific caption track for display

All three actions are performed through the player bridge using invoke(...) on the BambuserVideoView ref. See Player API › invoke.

Show or Hide Captions

Use the showCaptions and hideCaptions invoke functions to control the visibility of captions.

function enableClosedCaption() {
  playerRef.current?.invoke('showCaptions', '');
}

function disableClosedCaption() {
  playerRef.current?.invoke('hideCaptions', '');
}

Retrieve Available Captions

Use the getAvailableCaptions invoke function to fetch a list of available caption tracks. This allows you to present a selection to the user.

async function showCaptionSelector() {
  try {
    const result = await playerRef.current?.invoke('getAvailableCaptions', '');
    const captionList: string[] | undefined = result?.event?.availableCaptions;

    if (!captionList || captionList.length === 0) {
      console.log('No captions available.');
      return;
    }

    presentCaptionModal(captionList);
  } catch (error) {
    console.log('Error fetching captions:', error);
  }
}

The result has the following structure on both platforms:

{
  "event": {
    "availableCaptions": ["sv-SE", "en-US", "fr-CA"]
  }
}

Select a Caption Track

Use the selectCaptionTrack invoke function to select a specific caption track by its ID. The arguments string is evaluated as a JS expression on the player side, so wrap the ID with JSON.stringify to safely produce a quoted string literal.

function selectTrack(id: string) {
  playerRef.current?.invoke('selectCaptionTrack', JSON.stringify(id));

  // Also call showCaptions to ensure they are visible
  enableClosedCaption();
}

Configuration

You can control the visibility of the closed captions button using the ui.hideClosedCaptionsButton configuration flag. By default, the captions button is visible.

Config Key	Type	Default	Description
ui.hideClosedCaptionsButton	boolean	false	Hides the closed captions / subtitles button.

<BambuserVideoView
  ref={playerRef}
  id="your-show-id"
  configuration={{
    ui: {
      hideClosedCaptionsButton: true,
    },
  }}
/>

For the full configuration reference, see Configuration and Functions.