Self-hosting and versioning of THEOplayer

Your licensed THEOplayer can also be hosted on your own servers or CDN. This can be useful when you do not want to have a dependency on a third-party hosting infrastructure, for using THEOplayer on internal networks or for using THEOplayer inside mobile apps.

Important notice:
When self-hosting THEOplayer, it is important you regularly update your self-hosted THEOplayer files in order to benefit from the latest improvements.

In order to download the THEOplayer package and host it on your server, you will first have to determine which version of the player you want to use. The versions which are available for your specific license can be found in the versions file, which is located on the THEOplayer CDN: https://cdn.theoplayer.com/latest/<YourTHEOplayerLicenseKey>/versions.json

The versions file is a JSON array, which contains an entry for each available version, for example:

{
  "version": "1.2.3",
  "library": "http://cdn.theoplayer.com/1.2.3/<YourTHEOplayerLicenseKey>/theoplayer.js",
  "loader": "http://cdn.theoplayer.com/1.2.3/<YourTHEOplayerLicenseKey>/theoplayer.loader.js",
  "package": "http://cdn.theoplayer.com/1.2.3/<YourTHEOplayerLicenseKey>/theoplayer.zip"
}

Each entry contains a version-specific URL to different distributions of your licensed THEOplayer:

  • library: The full THEOplayer JavaScript library, can be used to load THEOplayer directly.
  • loader: A lightweight loader for THEOplayer which asynchronously loads the full library. You can add this script to the <head>-tag of your webpage instead of the full library URL in order to speed up your page loads.
  • package: This ZIP file contains all of the JavaScript files and resources required to host THEOplayer on your own server.

Configuring self-hosting

Once you extracted the ZIP package to your server, you must configure THEOplayer and provide the information where the resources can be found. For this, you should configure two parameters:

  • libraryLocation: This parameter should point to the location of the library. It is the location where the ZIP package has been extracted and the resources are available on the server. If this parameter is not set, THEOplayer will load additional resources from the THEOplayer CDN.
  • styleSheetURI: This parameter should point to the location of the THEOplayer CSS stylesheet. The fontsfolder should be placed in the same directory as the stylesheet. When this parameter is not set, the THEOplayer stylesheet will be loaded from the THEOplayer CDN. Setting this parameter to null will result in no stylesheet being loaded, in which case you should load the stylesheet in some other way. For example, you could include the stylesheet inside your own stylesheet to reduce the number of additional requests needed to load your webpage.

In order to configure these parameters, you have two options:

  1. You could use the following JavaScript code:
    window.theoplayer = window.theoplayer || {}; 
    window.theoplayer.configuration = window.theoplayer.configuration || {};
    window.theoplayer.configuration.libraryLocation = window.theoplayer.configuration.libraryLocation || 'http://yourcdn.com/theoplayer/'; 
    window.theoplayer.configuration.styleSheetURI = window.theoplayer.configuration.styleSheetURI || 'http://yourcdn.com/theoplayer/theoplayer.css';
  2. If you have an additional configuration, you can add these parameters as well to the existing configuration:
    theoplayer = {
        configuration : {
            libraryLocation : 'http://yourcdn.com/theoplayer',
            styleSheetURI : 'http://yourcdn.com/theoplayer/theoplayer.css',
            playbackRate : [0.5, 1, 2]
        }
    };