How to use THEOplayer with KeyOS BuyDRM

Introduction

This guide explains how you set-up THEOplayer in combination with the KeyOS BuyDRM, a partnered multi-DRM vendor. THEOplayer is pre-integrated with KeyOS and provides a user-friendly API to connect to their Widevine and PlayReady DRM solutions.

If you are already comfortable with the THEOplayer API, you can go straight over to DRM Pre-Integration API

The following topics will be covered:

  1. Prerequirements
  2. Starting Template
  3. Integrating KeyOS BuyDRM
  4. Conclusion

1. Prerequirements

There are two prerequirements in order to continue with this guide:

  1. This guide expects that you have a THEOplayer license. If you aren't using THEOplayer yet, you can start your free trial here.
  2. This guide expects that you are a client of KeyOS's BuyDRM, and that you are integrated with their streaming infrastructure. Information on BuyDRM can be found at https://www.buydrm.com/keyosplayer.

If you can place a checkmark next to these two fields, you are good to go.

2. Starting Template

The first thing you need is a valid THEOplayer set-up. If you have no experience with setting up our player, we have an excellent getting started guide.

To get THEOplayer to work, you only need to do three things:

  1. Reference the THEOplayer JavaScript library (and optionally the default CSS styles).
  2. Add a container which can hold your video player with HTML.
  3. Create your player through JavaScript using our API.

A basic HTML page with a working THEOplayer could like the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='/path/to/ui.css'> <!-- ads THEOplayer CSS -->
</head>
<body>

<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

<script type='text/javascript' src='/path/to/THEOplayer.js'></script>
<!-- ads THEOplayer library -->

<script>

var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element);

player.source = {
sources : [{
src : 'your.mpd',
type : 'application/dash+xml'
}]
};

</script>

</body>
</html>

 Pretty self-explanatory, isn't it?

<link rel="stylesheet" type="text/css" href='/path/to/ui.css'> <
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> 

The two snippets above are the references to the JS and CSS library.

<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

The snippet above is your HTML container.

<script>

var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element);

player.source = {
sources : [{
src : 'your.mpd',
type : 'application/dash+xml'
}]
};

</script>

The snippet above initializes your player, including a HLS source.

To fully master THEOplayer, be sure to read up our documentation.

3. Integrating KeyOS BuyDRM

Starting from the basic template above, you only need to add your BuyDRM token (=customdata) to your source configuration, and tell THEOplayer that you are using KeyOS.

player.source = {
    sources : {
        src : 'your.mpd',
        type : 'application/dash+xml',
        drm : {
             integration : 'keyos',
             customdata : 'PEtleU9T...blhNTD4='
        }
    }
}

Your updated starting template would now look like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href='/path/to/ui.css'> <!-- ads THEOplayer CSS -->
</head>
<body>

<div class="theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls"></div>

<script type='text/javascript' src='/path/to/THEOplayer.js'></script>
<!-- ads THEOplayer library -->

<script>

var element = document.querySelector('.theoplayer-container');
var player = new THEOplayer.Player(element);

player.source = {
sources : [{
src : 'your.mpd',
type : 'application/dash+xml',
drm: {
integration: 'keyos',
customdata: 'PEtleU9T...blhNTD4='
}
}]
};

</script>

</body>
</html>

We believe that a user-friendly, battle-tested pre-integration like this should be the de facto standard. Information on how you would set-up a more advanced integration can be found at the DRM Pre-Integration API documentation pages.

4. Conclusion

THEOplayer partnered with KeyOS to fully pre-integrate their BuyDRM solution, saving you tons of time. This pre-integration brings along multiple advantages.

Firstly, it's very simple to set-up KeyOS BuyDRM through THEOplayer.
Secondly, no surprises - you know that we are compatible with each other. We also regularly validate our integration, and are the first to know about changes to KeyOS.
Thirdly, it offers extra maintainability. Even if the KeyOS infrastructure changes, we attempt to be backwards compatible.
Lastly, it just works!

Extra resources:

  1. DRM Pre-Integration API
  2. THEOplayer Getting Started Guide
  3. KeyOS BuyDRM