How to use THEOplayer with MediaMelon

Introduction

This guide explains how you setup THEOplayer in combination with MediaMelon. THEOplayer provides a user-friendly and pre-integrated API for quality playback and efficient bandwidth utilization through MediaMelon's QBR technology.

If you are already comfortable with the THEOplayer API, you can go straight over to the MediaMelon API

The following topics will be covered:

  1. Prerequirements
  2. Starting Template
  3. Integrating MediaMelon
  4. Conclusion

1. Prerequirements

There are three 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. Be sure to have THEOplayer version 2.17 or higher.
  2. This guide expects that you are a MediaMelon client and that you are integrated with their streaming infrastructure. Information on MediaMelon can be found at www.mediamelon.com.
  3. This guide expects that you have access to the MediaMelon client SDK and the latest version of JQuery.

If you can place a checkmark next to these three 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 DASH source.

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

3. Integrating MediaMelon

Starting from the basic template above, you need to add the MediaMelon client SDK to the page, a latest version of JQuery, and a MediaMelonQBRConfiguration to your source that specifies MediaMelon credentials, mode, metaurl, player description, and an integration specifying mediamelon.

player.source = {
    sources : [{
        src : 'your.mpd',
        type : 'application/dash+xml',
abr : {
integration : 'mediamelon',
metaURL : 'filename.qbr',
assetID : SomeID,
mode : 'QBRBitsave',
customerID : 'SomeCustomerID',
domainName : 'SomeDomain',
playerName : 'THEOplayer',
subscriberID : 'SomeSubscriber'

}
]
};

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 src='/path/to/jquery-X.X.X.min.js' crossorigin='anonymous'></script> <!-- ads JQuery -->
<script type='text/javascript' src='/path/to/mmsmartstreamingsdk.js'></script> <!-- ads MediaMelonlibrary -->
<script type='text/javascript' src='/path/to/THEOplayer.js'></script> <!-- ads THEOplayer library -->
<script> player.source = { sources : [{ src : 'your.mpd', type : 'application/dash+xml', abr : {
integration : 'mediamelon',
metaURL : 'filename.qbr',
assetID : SomeID,
mode : 'QBRBitsave',
customerID : 'SomeCustomerID',
domainName : 'SomeDomain',
playerName : 'THEOplayer',
subscriberID : 'SomeSubscriber'
} }] }; </script>
</body>
</html>

If you want to read up on how to specify a THEOplayer source with a MediaMelonQBRConfiguration you can check the MediaMelonQBRConfiguration pre-integration API.

4. Conclusion

THEOplayer partnered with MediaMelon to fully pre-integrate their QBR solution, allowing you to save on your bit rate usage and reducing your streaming costs.

Extra resources:

  1. MediaMelonQBRConfiguration
  2. THEOplayer Getting Started Guide
  3. MediaMelon website