### Install Project Dependencies

Source: https://github.com/ravnur-inc/ravplayer/blob/main/player-demos/vue-demo/README.md

Run this command to install all necessary project dependencies after cloning the repository.

```sh
npm install
```

--------------------------------

### Start Production Server

Source: https://github.com/ravnur-inc/ravplayer/blob/main/player-demos/react-demo/README.md

Run this command after building your application to start the production-ready server. Ensure you have deployed the output of `remix build`.

```sh
npm start
```

--------------------------------

### Start Development Server

Source: https://github.com/ravnur-inc/ravplayer/blob/main/player-demos/react-demo/README.md

Use this command to launch your Remix application in development mode. It enables features like hot-reloading for faster iteration.

```sh
npm run dev
```

--------------------------------

### Setup Media Source and Options

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Configure the player with media source details and additional options. Replace placeholders with your actual media URL and MIME type.

```javascript
// Define an object containing media source information. Refer to the Main Types section below for details.
let media = {
   src: 'YOUR_MEDIA_SOURCE_URL',
   type: "YOUR_MEDIA_MIME_TYPE",
}; // Player$Source type

// Object containing player options
let options = { ... };

player.setup(media, options);
```

--------------------------------

### Setup Annotations

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Integrate annotations into the player by providing an array of annotation sources. The `showAnnotations` option is enabled by default but disabled for audio-only content.

```javascript
var annotations = [
      {
        src: "/en.json",
        label: "English",
        srclang: "en-us",
      },
      {
        src: '/ge.json',
        label: 'German',
        srclang: 'ge'
      }
    ];

let media = {
   src: 'YOUR_MEDIA_SOURCE',
   type: "YOUR_MEDIA_MIME_TYPE",
   annotations: annotations
};

let options = {
   showAnnotations: true, // Enabled by default, disabled for audio
};

player.setup(media, options);
```

--------------------------------

### Install Ravnur Player via NPM

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Install the Ravnur Player package using npm. This command downloads the package and adds it to your project's dependencies.

```bash
npm install ravnur-player-public
```

--------------------------------

### Setup Player with AES Encryption

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Configure the player to use AES encryption by providing an AES token during setup. This method is not supported on iOS devices without a custom proxy.

```javascript
let media = {
   src: 'YOUR_MEDIA_SOURCE',
   type: "YOUR_MEDIA_MIME_TYPE",
};

let options = {
   aesToken: 'YOUR_AES_TOKEN'
};

player.setup(media, options);
```

--------------------------------

### Setup Chapters

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Configure chapters for media playback by providing an array of chapter sources. The `showTOC` option is enabled by default but disabled for audio-only content.

```javascript
var chapters = [
  {
    src: "/en.vtt",
    label: "English",
    srclang: "en-us",
    default: true,
  },
  {
    src: "/ge.vtt",
    label: "German",
    srclang: "ge"
  },
];

let media = {
   src: 'YOUR_MEDIA_SOURCE',
   type: "YOUR_MEDIA_MIME_TYPE",
   chapters: chapters
};

let options = {
   showTOC: true, // Enabled by default, disabled for audio
};

player.setup(media, options);
```

--------------------------------

### Emit Custom Event

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Manually trigger player events to update components or synchronize interactions. This example emits a 'fullscreenchanging' event.

```javascript
player.bus.emit('fullscreenchanging', false);
```

--------------------------------

### Import Ravnur Player in JavaScript

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Import the RavnurMediaPlayer class into your JavaScript file after installing it via npm. This makes the player available for use.

```javascript
import { RavnurMediaPlayer } from 'ravnur-player-public'
```

--------------------------------

### Setup Closed Captions

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Configure closed captions for the player by providing an array of caption sources. The `showClosedCaptions` option is enabled by default but disabled for audio-only content.

```javascript
var closedCaptions = [
   {
      src: "/en.vtt",
      label: "English",
      kind: "captions",
      srclang: "en-us",
      default: true,
   },
   {
      src: "/ge.vtt",
      label: "German",
      kind: "captions",
      srclang: "ge",
   }
];

let media = {
   src: 'YOUR_MEDIA_SOURCE',
   type: "YOUR_MEDIA_MIME_TYPE",
   cc: closedCaptions
};

let options = {
   // Enabled by default, disabled for audio
   showClosedCaptions: true,

   // Disabled by default. Enables a cc search menu item
   showCaptionSearch: true,

   // Enabled by default, disabled for mobile devices.
   // Shows captions location option in captions settings - below the video or overlaid.
   // Default location is overlaid.
   showCCLayout: true,
};

player.setup(media, options);
```

--------------------------------

### Update Ravnur Player via NPM

Source: https://github.com/ravnur-inc/ravplayer/blob/main/README.md

Use this command to update the Ravnur Player if it was installed via the NPM registry. This ensures you are using the latest version.

```bash
npm update ravnur-player-public
```

--------------------------------

### Get Current Playback Time

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Retrieve the current playback time of the media in seconds. This method is useful for tracking progress or synchronizing external elements.

```javascript
player.controller.getCurrentTime();
```

--------------------------------

### Initialize Ravnur Media Player

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Initialize the Ravnur Media Player by providing the target HTML element and optional style configurations. Ensure the target element exists in the DOM.

```html
<div id="player" style="max-width: 720px; height: 400px;"></div>
```

```javascript
// Retrieve the HTML element where the player will be initialized
const element = document.getElementById('player');

// Define custom styling options for the player (Optional)
const styles = { ... }; // Player$Styles type

// Initialize the Ravnur Media Player instance
const player = new RavnurMediaPlayer(element, styles);
```

--------------------------------

### Build for Production

Source: https://github.com/ravnur-inc/ravplayer/blob/main/player-demos/react-demo/README.md

Execute this command to create an optimized production build of your Remix application. This prepares your app for deployment.

```sh
npm run build
```

--------------------------------

### Configure Fairplay DRM

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Set up Fairplay DRM by specifying the license server URL and certificate URL. Update the placeholder values with your Fairplay configuration.

```javascript
let media = {
   src: 'YOUR_MEDIA_SOURCE',
   type: "YOUR_MEDIA_MIME_TYPE",
};

let options = {
   fairplayURL: 'YOUR_FAIRPLAY_LICENSE_SERVER_URL',
   fairplayCertificateUrl: 'YOUR_FAIRPLAY_LICENSE_CERTIFICATE_URL',
};

player.setup(media, options);
```

--------------------------------

### Configure Playready DRM

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Configure the player for Playready DRM by providing your Playready license server URL. Replace placeholders with your specific details.

```javascript
let media = {
   src: 'YOUR_MEDIA_SOURCE',
   type: "YOUR_MEDIA_MIME_TYPE",
};

let options = {
   playreadyURL: 'YOUR_PLAYREADY_LICENSE_SERVER_URL'
};

player.setup(media, options);
```

--------------------------------

### Include Ravnur Player via CDN

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Include this script in the `<head>` of your HTML file to load the Ravnur Media Player using a Content Delivery Network.

```html
<script src='https://unpkg.com/ravnur-player-public@latest/dist/cdn/RavnurMediaPlayer.min.js' ></script>
```

--------------------------------

### Player Controller Methods

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

This section outlines the methods available through the player's controller to manage and interact with media playback, including retrieving playback status, controlling playback, and managing media sources and quality.

```APIDOC
## Methods

The Ravnur Media Player has a set of tools to control and manipulate media playback within web applications. Customize playback controls, dynamically load media sources, select quality levels, audio tracks, and more.

### Example Usage
```javascript
player.controller.getCurrentTime();
```

| Method | Payload | Return | Description |
| :--- | :----: | :----: | :--- |
|getCurrentTime| - | `number` | Retrieves the current time of the media in seconds|
|setCurrentTime| `number` | - | Sets the player's playback time|
|isPaused| - | `boolean` | Checks if the media is currently paused|
|isEnded| - | `boolean` | Checks if the media has reached the end|
|isMuted| - | - | Checks if the player is currently muted|
|play| - | `Promise` | Initiates playback of the media. Returns a `Promise` resolved when playback begins|
|pause| - | - | Pauses the current playback|
|prevFrame| - | - | Steps to the previous frame in the media|
|nextFrame| - | - | Steps to the next frame in the media|
|getDuration| - | `number` | Retrieves the duration of the media in seconds|
|setMuted| `boolean` | - | Adjusts the muted state of the player|
|getVolume| - | `number` | Retrieves the current volume level|
|setVolume| `number` | - | Sets the volume level of the player|
|getLevels| - | Array of objects | Retrieves the available quality levels|
|getLevel| - | Object | Retrieves the current quality level|
|setLevel| Object | - | Sets the quality level of the media|
|isMultiQuality| - | `boolean` | Checks if the media has multiple quality options|
|isMultiAudioTracks| - | `boolean` | Checks if the media has multiple audio tracks|
|getAudioTracks| - | Array of objects | Retrieves the available audio tracks|
|getAudioTrack| - | `number` | Retrieves the index of the current audio track|
|setAudioTrack| `number` | - | Sets the current audio track by index|
|load| `Player$Source` | - | Loads a new media source|
|getElement| - | HTML element | Retrieves the player element|
|_getFrameDuration| - | `number` | Retrieves the current frame duration|
|refreshCrawlExtension|`crawl: Player$CrawlOptions, visibility: boolean`| - |Refreshes crawl options in the player|
|setPlaybackRate|`number`| - |Sets the current playback rate|
```

--------------------------------

### Configure Widevine DRM

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Use this snippet to set up the player for Widevine DRM. Ensure you replace placeholder URLs with your actual Widevine license server URL.

```javascript
let media = {
   src: 'YOUR_MEDIA_SOURCE',
   type: "YOUR_MEDIA_MIME_TYPE",
};

let options = {
   widevineURL: 'YOUR_WIDEVINE_LICENSE_SERVER_URL'
};

player.setup(media, options);
```

--------------------------------

### Include Ravnur Player in Codebase

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Add this script tag to your HTML file to include the Ravnur Media Player directly within your project's assets.

```html
<script src="path/to/RavnurMediaPlayer.min.js"></script>
```

--------------------------------

### Destroy Ravnur Media Player Instance

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Remove the player from the DOM and clean up its resources by calling the destroy method. Set the player variable to null afterwards.

```javascript
player.destroy();
player = null;
```

--------------------------------

### Player Source Type Definition

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the structure for a media source object, including ID, source URL, type, title, and optional properties for annotations, chapters, captions, preview, poster, thumbnails, and clip timing.

```typescript
type Player$Source = {
   id: string;
   src: string,
   type: string, // 'application/x-mpegURL', 'video/mp4' and etc.
   title: string,
   annotations?: Player$TimeDataSource[],
   chapters?: Player$TimeDataSource[],
   cc?: Player$TimeDataSource[],
   preview?: ?string,
   poster?: ?string,
   thumbnails?: ?string,
   clip?: ?[number, number] // [ 10, 300 ] sec
}
```

--------------------------------

### Type Definition for Player Styles

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the style properties for the player, such as accent color, main color, and dimensions.

```typescript
type Player$Styles = {
   accentColor: string,
   mainColor: string,
   submenuBgColor: string,
   submenuColor: string,
   chaptersBubbleColor: string,
   pltHeight: string,
   rplaylistHeight: string
}
```

--------------------------------

### Playlist Mode Type Definition

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the possible values for playlist mode, including 'bottom', 'right', and 'auto'.

```typescript
type Player$PlaylistMode = 'bottom' | 'right' | 'auto';
```

--------------------------------

### Type Definition for Player State

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the overall player state, including fullscreen, theater mode, closed captions, and table of contents.

```typescript
type Player$State = {
   isFullScreen: boolean,
   isTheaterMode: boolean,
   cc: Player$StateCC,
   toc: Player$StateTOC
}
```

--------------------------------

### Crawl Options Type Definition

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the structure for crawl options, specifying text, speed, background color, and text color for crawl effects.

```typescript
type Player$CrawlOptions = {
   text: string,
   speed: number,
   backgroundColor: string,
   textColor: string
}
```

--------------------------------

### Time Data Source Type Definition

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the structure for time-based data sources, used for annotations, chapters, and captions. Includes source URL, label, language, and optional properties.

```typescript
type Player$TimeDataSource = {
   src: string,
   label: string,
   srclang: string,
   default?: boolean,
   type?: 'json' | 'vtt',
   state?: Player$SourceStatus
}
```

--------------------------------

### Emitted Events

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

This section describes the events that can be emitted by the player to notify external components of specific actions or changes. These events can also be manually triggered.

```APIDOC
## Emits

Emits are designed to notify the player of specific actions or changes, allowing for dynamic updates and synchronization with external components or user interactions. You can manually trigger these events.

### Example Usage
```javascript
player.bus.emit('fullscreenchanging', false);
```

| Name | Payload | Description |
| :--- | :----: | :--- |
|fullscreenchanging|`boolean`|Alters full-screen mode|
|toclang|`string`|Modifies language for cue points|
|cclang|`string`|Modifies language for captions|
|annotationslang|`string`|Modifies language for annotations|
|prevtrack|`null`|Switches to the previous media in the playlist|
|nexttrack|`null`|Switches to the next media in the playlist|
|changeplaylistmode|`bottom` \| `right`|Changes the player's playlist mode|
|changesource|`Player$Source`|Changes the current media source|
```

--------------------------------

### Type Definition for Time Data

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the structure for time-based data, including ID, time range, and associated text or title.

```typescript
type Player$TimeData = {
   id: string,
   from: number,
   to: number,
   text: string,
   title?: ?string
}
```

--------------------------------

### Type Definition for Player Translation

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines a comprehensive set of translation keys and their string values for player UI elements and messages.

```typescript
type Player$Translation = {
   'fullscreen': string,
   'exit-fullscreen': string,
   'theater': string,
   'exit-theater': string,
   'play': string,
   'pause': string,
   'replay': string,
   'standard-playbackrate': string,
   'forward': string,
   'backward': string,
   'prevframe': string,
   'nextframe': string,
   'annotations': string,
   'quality': string,
   'audio-track': string,
   'playback-rate': string,
   'settings': string,
   'buffering': string,
   'cc': string,
   'chapters': string,
   'back': string,
   'settings-fontcolor': string,
   'settings-fontsize': string,
   'settings-fontfamily': string,
   'settings-background': string,
   'settings-captionlocations': string,
   'help': string,
   'download': string,
   'video-only': string,
   'video-and': string,
   'language': string,
   'unapproved-source': string,
   'translate': string,
   'translating': string,
   'monoserif'  : string,
   'propserif'  : string,
   'monosans'   : string,
   'propssans'  : string,
   'cc-location-over'    : string,
   'cc-location-below'   : string,
   'red'     : string,
   'purple'  : string,
   'indigo'  : string,
   'blue'    : string,
   'green'   : string,
   'yellow'  : string,
   'orange'  : string,
   'brown'   : string,
   'grey'    : string,
   'white'   : string,
   'black'   : string,
   'help-bacward'  : string,
   'help-play'     : string,
   'help-skip'     : string,
   'help-volume'   : string,
   'help-esc'      : string,
   'no-video'      : string,
   'no-flash'      : string,
   'playlist-count-of': string
}
```

--------------------------------

### Source Status Type Definition

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the possible status codes for a media source, represented by numbers 0, 1, or 2.

```typescript
type Player$SourceStatus = 0 | 1 | 2;
```

--------------------------------

### Type Definition for Closed Caption (CC) Font Sizes

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the possible font size values for closed captions.

```typescript
type Player$CCFontSize = '75%' | '100%' | '125%' | '150%' | '200%'
```

--------------------------------

### Type Definition for Closed Caption (CC) Colors

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the possible color values for closed captions.

```typescript
type Player$CCColor = '#F44336'
   | '#9C27B0' | '#3F51B5' | '#2196F3' | '#4CAF50'
   | '#FFEB3B' | '#FF9800' | '#795548' | '#9E9E9E' | '#FFF' | '#000'
```

--------------------------------

### Type Definition for Closed Caption (CC) Font Families

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the possible font family values for closed captions.

```typescript
type Player$CCFontFamily = '"Courier New", Courier, "Nimbus Mono L", "Cutive Mono", monospace'
   | '"Times New Roman", Times, Georgia, Cambria, "PT Serif Caption", serif'
   | '"Deja Vu Sans Mono", "Lucida Console", Monaco, Consolas, "PT Mono", monospace'
   | 'Roboto, "Arial Unicode Ms", Arial, Helvetica, Verdana, sans-serif'
```

--------------------------------

### Type Definition for Table of Contents (TOC) State

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the state object for the table of contents, including language and timedata.

```typescript
type Player$StateTOC = {
   lang: ?string,
   sources: Player$TimeDataSource[],
   timedata: Player$TimeData[],
   timedataLang: string
}
```

--------------------------------

### Logger Type Definition

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the structure for a logger object, including methods for different log levels (debug, log, warn, error).

```typescript
type Player$LoggerFn = (...args: Array<mixed>) => void

type Player$Logger = {
   debug : Player$LoggerFn,
   log   : Player$LoggerFn,
   warn  : Player$LoggerFn,
   error : Player$LoggerFn
}

type Player$LoggerFn = (...args: Array<mixed>) => void
```

--------------------------------

### Type Definition for Closed Caption (CC) State

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the state object for closed captions, including color, font settings, location, and language.

```typescript
type Player$StateCC = {
   color: Player$CCColor,
   bgcolor: Player$CCColor,
   fontSize: Player$CCFontSize,
   fontFamily: Player$CCFontFamily,
   location: Player$CCLocation,
   lang: ?string,
   sources: Player$TimeDataSource[],
   loading?: boolean,
   timedata: Player$TimeData[],
   timedataLang: string
}
```

--------------------------------

### Type Definition for Closed Caption (CC) Location

Source: https://github.com/ravnur-inc/ravplayer/blob/main/ravnur-player-instructions.md

Defines the possible location values for closed captions.

```typescript
type Player$CCLocation = 'over' | 'below'
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.