Closed Captions

The Ravnur Media Player provides comprehensive support for closed captions with extensive customization options for appearance and positioning.

Caption Customization

Users can customize caption appearance through the player's CC settings menu, including text color, background color, font size, font family, and position (over or below video).

Basic Captions

Add captions to your video by including them in the source configuration. Captions are provided as WebVTT or JSON files.

Setup Code

const mediaSource = {
  id: 'captions-demo',
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  type: 'application/x-mpegURL',
  title: 'Video with Captions',
  cc: [
    {
      src: '/captions-en.json',    // URL to JSON caption file
      label: 'English',             // Display name in CC menu
      srclang: 'en',                // Language code
      type: 'json',                 // Specify JSON format
      default: true                 // Set as default caption track
    }
  ]
};

player.setup(mediaSource);

Multiple Languages

Support multiple caption languages by providing an array of caption sources. Users can switch between languages using the player's CC menu.

Setup Code

const mediaSource = {
  id: 'multilang-demo',
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  type: 'application/x-mpegURL',
  title: 'Video with Multiple Caption Languages',
  cc: [
    {
      src: '/captions-en.json',
      label: 'English',
      srclang: 'en',
      type: 'json',
      default: true  // Default caption track
    },
    {
      src: '/captions-es.json',
      label: 'Español',
      srclang: 'es',
      type: 'json'
    }
  ]
};

player.setup(mediaSource);

Caption Customization

The player provides a comprehensive CC settings menu where users can customize the appearance of captions to their preferences.

Available Customization Options

Text Color

Choose from 11 color options:

RedPurpleIndigoBlueGreenYellowOrangeBrownGreyWhiteBlack

Background Color

Same 11 color options available for caption background.

Font Family

Four font family options:

Monospace Serif - Courier New
Proportional Serif - Times New Roman
Monospace Sans - Lucida Console
Proportional Sans - Arial (default)

Caption Position

Over - Captions appear overlaid on the video (default)
Below - Captions appear below the video player

Supported Caption Formats

The player supports two caption file formats:

WebVTT (Recommended)

Web Video Text Tracks (WebVTT) is the standard format for web video captions. It's widely supported and easy to create.

WEBVTT

00:00:00.000 --> 00:00:02.000
Welcome to our video

00:00:02.000 --> 00:00:05.000
This is a sample caption

00:00:05.000 --> 00:00:08.000
Captions help make content accessible

JSON Format

The player also supports a custom JSON format for time-based data including captions.

[
  {
    "id": "caption-en-0",
    "from": 0,
    "to": 9.5,
    "text": "Welcome to this video demonstration"
  },
  {
    "id": "caption-en-1",
    "from": 10,
    "to": 19.5,
    "text": "In this section, we'll explore the key features"
  },
  {
    "id": "caption-en-2",
    "from": 20,
    "to": 29.5,
    "text": "The player provides comprehensive media controls"
  }
]

Additional Caption Options

The player provides several options to control caption functionality:

const options = {
  showClosedCaptions: true,    // Show CC button (default: true)
  showCCLayout: true,           // Allow caption layout customization (default: true)
  showCaptionSearch: true,      // Enable caption search feature (default: false)
  showDownloadCC: true          // Allow caption download (default: false)
};

player.setup(mediaSource, options);

Ravnur Media Platform

Simple. Reliable. Flexible.

Auto-generate captions with speaker detection and text recognition powered by Microsoft Azure cognitive services. Use our web-based caption editor to clean up mistakes and perfect your captions.

←

AES Encryption

Cue Points (Chapters)

→