Live Stream Examples

Learn how to configure the Ravnur Media Player for live streaming scenarios.

Live Streaming Technology

By default in live stream mode, Ravnur Player uses hls.js under the hood for optimal live streaming performance.

1. Standard Live Stream

Basic live stream configuration with the isLive option enabled. This mode automatically jumps to the live edge when playback starts.

Configuration

// Initialize player
const element = document.getElementById('player-standard-live');
const player = new RavnurMediaPlayer(element);

// Setup with live stream source
const media = {
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  type: 'application/x-mpegURL'
};

const options = {
  autoStart: true,
  muted: true, // Starts playback muted (required for autoplay in most browsers)
  showError: false, // Do not interrupt the live stream in case of error
  isLive: true,
  hls: {
    lowLatencyMode: false
  }
};

player.setup(media, options);

2. Low Latency Live Stream

Optimized configuration for low latency streaming using HLS.js. These are the best options that work reliably in our applications, keeping the player close to the live edge while minimizing buffering delays.

Configuration

// Initialize player
const element = document.getElementById('player-low-latency');
const player = new RavnurMediaPlayer(element);

// Setup with low latency live stream source
const media = {
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  type: 'application/x-mpegURL'
};

const options = {
  autoStart: true,
  muted: true, // Starts playback muted (required for autoplay in most browsers)
  showError: false, // Do not interrupt the live stream in case of error
  isLive: true,
  hls: {
    lowLatencyMode: true,
    maxFragLookUpTolerance: 0.25,
    liveSyncDuration: 3,
    highBufferWatchdogPeriod: 1,
    enableWorker: false,
    liveDurationInfinity: true
  }
};

player.setup(media, options);

3. Live Stream with Disabled Seek

Live stream with seeking disabled using isProgressLiveStream. This option disables the progress bar seeking and current time indicator, providing a true live-only experience.

Configuration

// Initialize player
const element = document.getElementById('player-no-seek');
const player = new RavnurMediaPlayer(element);

// Setup with live stream source
const media = {
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
  type: 'application/x-mpegURL'
};

const options = {
  autoStart: true,
  muted: true, // Starts playback muted (required for autoplay in most browsers)
  showError: false, // Do not interrupt the live stream in case of error
  showForward: false,
  showBackward: false,
  isProgressLiveStream: true,
  hls: {
    lowLatencyMode: false
  }
};

player.setup(media, options);

Ravnur Media Platform

Simple. Reliable. Flexible.

Create dedicated streaming channels for your organization with support for popular hardware and software encoders. Run unlimited concurrent streams and simulcast to YouTube, Facebook Live, Twitter, and more - all from a single encoder output.