DRM Examples

Digital Rights Management (DRM) provides content protection for video content. Ravnur Media Player supports multiple DRM systems.

Browser Compatibility

DRM support is browser-specific:

Widevine: Chrome, Firefox, Edge, Opera (Android)
PlayReady: Edge, Internet Explorer 11
FairPlay: Safari (macOS, iOS)

Note

The examples below show configuration code only. To test DRM playback, you'll need valid DRM license server URLs and protected content from your DRM provider.

Widevine DRM

Widevine is Google's DRM solution, widely supported on Chrome, Firefox, Edge, and Android devices.

Setup Code

const mediaSource = {
  id: 'widevine-demo',
  src: 'YOUR_DRM_PROTECTED_STREAM_URL',
  type: 'application/dash+xml',  // or 'application/x-mpegURL' for HLS
  title: 'DRM Protected Content'
};

const options = {
  widevineURL: 'YOUR_WIDEVINE_LICENSE_SERVER_URL'
};

player.setup(mediaSource, options);

PlayReady DRM

PlayReady is Microsoft's DRM solution, primarily supported on Edge and Internet Explorer 11.

Setup Code

const mediaSource = {
  id: 'playready-demo',
  src: 'YOUR_DRM_PROTECTED_STREAM_URL',
  type: 'application/dash+xml',
  title: 'DRM Protected Content'
};

const options = {
  playreadyURL: 'YOUR_PLAYREADY_LICENSE_SERVER_URL'
};

player.setup(mediaSource, options);

FairPlay DRM

FairPlay is Apple's DRM solution, supported on Safari for macOS and iOS devices. FairPlay requires both a license server URL and a certificate URL.

Setup Code

const mediaSource = {
  id: 'fairplay-demo',
  src: 'YOUR_DRM_PROTECTED_STREAM_URL',
  type: 'application/x-mpegURL',  // FairPlay typically uses HLS
  title: 'DRM Protected Content'
};

const options = {
  fairplayURL: 'YOUR_FAIRPLAY_LICENSE_SERVER_URL',
  fairplayCertificateUrl: 'YOUR_FAIRPLAY_CERTIFICATE_URL'  // Required for FairPlay
};

player.setup(mediaSource, options);

Multi-DRM Configuration

For maximum compatibility across different browsers and devices, you can configure multiple DRM systems simultaneously. The player will automatically use the appropriate DRM system based on the browser.

Setup Code

const mediaSource = {
  id: 'multi-drm-demo',
  src: 'YOUR_DRM_PROTECTED_STREAM_URL',
  type: 'application/dash+xml',
  title: 'DRM Protected Content'
};

const options = {
  // Widevine for Chrome, Firefox, Edge, Opera
  widevineURL: 'YOUR_WIDEVINE_LICENSE_SERVER_URL',

  // PlayReady for Edge, IE11
  playreadyURL: 'YOUR_PLAYREADY_LICENSE_SERVER_URL',

  // FairPlay for Safari (requires HLS stream)
  fairplayURL: 'YOUR_FAIRPLAY_LICENSE_SERVER_URL',
  fairplayCertificateUrl: 'YOUR_FAIRPLAY_CERTIFICATE_URL'
};

// The player will automatically select the appropriate DRM system
// based on the browser's capabilities
player.setup(mediaSource, options);

Additional Resources