Basic Usage

These examples demonstrate the basic setup of the Ravnur Media Player with different types of media sources.

Player Engine

By default, Ravnur Player uses Shaka.js for media playback. You can force the player to use a different engine by setting useHTMLPlayer: true for native HTML5 player or useHLSJSPlayer: true for HLS.js player in the options.

Video Example

Basic video playback with a single video source.

Setup Code

const mediaSource = {
  id: 'video-demo',
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  type: 'application/x-mpegURL',
  title: 'Big Buck Bunny',
  poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/1200px-Big_buck_bunny_poster_big.jpg'
};

player.setup(mediaSource);

Audio Example

Audio playback with simplified UI optimized for audio content.

Setup Code

const mediaSource = {
  id: 'audio-demo',
  src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
  type: 'audio/mp3',
  title: 'SoundHelix Song #1'
};

const options = {
  isAudio: true  // Enables audio-optimized UI
};

player.setup(mediaSource, options);

HLS Streaming Example

HTTP Live Streaming (HLS) is an adaptive bitrate streaming protocol developed by Apple. It's widely supported across different platforms and devices.

Setup Code

const mediaSource = {
  id: 'hls-demo',
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  type: 'application/x-mpegURL',
  title: 'HLS Stream Example',
  poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/1200px-Big_buck_bunny_poster_big.jpg'
};

player.setup(mediaSource);

DASH Streaming Example

Dynamic Adaptive Streaming over HTTP (DASH) is an adaptive bitrate streaming technique that enables high quality streaming of media content over the internet.

Setup Code

const mediaSource = {
  id: 'dash-demo',
  src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
  type: 'application/dash+xml',
  title: 'DASH Stream Example',
  poster: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/1200px-Big_buck_bunny_poster_big.jpg'
};

player.setup(mediaSource);