Theoplayer NPM

THEOplayer

THEOplayer is the universal video player solution created by THEO Technologies. It enables you to quickly deliver cross-platform content playback.

Prerequisites

A valid THEOplayer license. Request yours via our THEOportal.

Included features

The THEOplayer SDK consists of modular features. This package includes the following features: ui, dash, hls, hesp, chromecast, vr, vr-webxr, airplay, spotx, relatedcontent, social, upnext, cache, contextmenu, youbora, mediamelon, ads, moat, texttrackstyle-ui, google-dai, freewheel, activequalitylabel, upcomingadnotification, agama, webaudio, verizonmedia, streamone, lcevc, mediatailor, theoads, millicast

If you need a different set of features, you can install a different variant of this package:

(You should only install one of the above-mentioned variants at a time.)

Installation

Install using your favorite package manager for Node (such as npm or yarn):

npm install theoplayer

You can also install a specific version instead:

npm install theoplayer@6.0.0

Note that versions earlier than 2.82.0 are not available on the public npm registry. Earlier versions are available through our THEOportal.

Usage

Add the THEOplayer library to your JavaScript web app:

import * as THEOplayer from 'theoplayer';

// or if you only need the chromeless version (without UI):
import * as THEOplayer from 'theoplayer/chromeless';

Note Starting with THEOplayer 6.0, this will import a JavaScript module targeting modern browsers, using modern JavaScript syntax such as async/await. If you need to support older browsers (such as older smart TVs), see the section below on legacy browser support.

Add the CSS stylesheet for the THEOplayer UI to your HTML page:

<link rel="stylesheet" href="/url/to/node_modules/theoplayer/ui.css" />

Next, create an HTML element that will contain the player:

<div id="theoplayer-container" class="video-js theoplayer-skin"></div>

Finally, create a player instance using the THEOplayer.Player constructor. Pass it the created HTML element and a configuration object.

The configuration object must contain a valid license obtained from THEOportal. See our how-to guides for more information.

// The HTML element
let element = document.querySelector('#theoplayer-container');
// The player configuration
let configuration = {
    // Your license as given by THEOportal.
    license: 'your_theoplayer_license',
    // The URL where other JavaScript files from this package will be hosted on your web server.
    // THEOplayer may need to load these files as Web Workers in order to play certain streams.
    libraryLocation: '/url/to/node_modules/theoplayer/'
};
// Create the player instance
let player = new THEOplayer.Player(element, configuration);

That's it! You should now have a working player on your web page. You can control this player through its UI, or through the player variable's JavaScript API.

Documentation

The documentation for THEOplayer is located on our documentation website. For an example on how to setup THEOplayer, take a look at our Getting started guide.

Legacy browser support

By default, THEOplayer targets modern browsers that support modern JavaScript syntax (such as async/await). This keeps the download size small, so your viewers can spend less time waiting for your page to load and start watching their video faster.

On older browsers (such as older smart TVs), you need to load a different version of the THEOplayer library that uses older JavaScript syntax. Instead of using export to expose the public THEOplayer API, this version creates a global THEOplayer variable that exposes the full API.

<script src="/url/to/node_modules/THEOplayer.js"></script>

<!-- or if you only need the chromeless version (without UI) -->
<script src="/url/to/node_modules/THEOplayer.chromeless.js"></script>

<script>
    // ...
    // use THEOplayer through the global variable
    let player = new THEOplayer.Player(element, configuration);
</script>

Support

If you are having issues installing or using the package, first look for existing answers on our documentation website, and in particular our FAQ.

You can also contact our technical support team by following the instructions on our support page. Note that your level of support depends on your selected support plan.