Installation

There are several ways to install the Ravnur Media Player. You can use it via CDN, add it to your codebase, or fetch it using the npm registry.

Using CDN

Include the Ravnur Media Player script in your HTML file by adding the following CDN link in the <head> section:

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

Add to Codebase

Alternatively, you can download and include the Ravnur Media Player script to your project's codebase:

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

Using NPM registry

You can also install Ravnur Media Player using the NPM package manager.

1. Install Ravnur Player

npm install ravnur-player-public

2. Include the player import in the file

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

Initialization

To use the Ravnur Media Player, initiate a new instance by providing the target element and styles:

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 = { ... }; // PlayerStyles type

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

Type Reference

The styles parameter accepts a PlayerStyles object for customizing the player's appearance.

By following these instructions, you'll successfully initialize the Ravnur Media Player for integration into your web application.

Setup

After initialization, set up the player with a media source and additional options.

// Define an object containing media source information
let media = {
   src: 'YOUR_MEDIA_SOURCE_URL',
   type: "YOUR_MEDIA_MIME_TYPE",
}; // PlayerSource type

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

player.setup(media, options);

Type Reference

The media parameter accepts a PlayerSource object. For available options, see Player Options.

Important!

Ensure to replace YOUR_MEDIA_SOURCE_URL with the actual URL of your media source, and YOUR_MEDIA_MIME_TYPE with the appropriate MIME type of your media content.

Destroying the Player

You can use the destroy method to remove a player from the DOM and destroy it.

player.destroy();
player = null;