THEOplayer is the universal video player solution, enabling you to quickly deliver cross-platform content playback.
THEOplayer is the universal video player solution created by THEO Technologies. It enables you to quickly deliver cross-platform content playback.
- A valid THEOplayer license. Request yours via our THEOportal.
The THEOplayer SDK consists of modular features. This package includes the following features: ui, dash, hls, hesp, chromecast, vr, airplay, spotx, relatedcontent, social, upnext, cache, contextmenu, youbora, mediamelon, ads, moat, texttrackstyle-ui, google-dai, freewheel, activequalitylabel, upcomingadnotification, agama, webaudio, uplynk, streamone, lcevc, mediatailor, theoads, millicast, hbbtv
If you need a different set of features, you can install a different variant of this package:
- theoplayer
- @theoplayer/basic-hesp
- @theoplayer/basic-hls
- @theoplayer/basic-dash
- @theoplayer/basic-hls-dash
- @theoplayer/extended
- @theoplayer/theoads
(You should only install _one_ of the above-mentioned variants at a time.)
Install using your favorite package manager for Node (such as npm or yarn):
``bash`
npm install theoplayer
You can also install a specific version instead:
`bash`
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.
Add the THEOplayer library to your JavaScript web app:
`javascript
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:
`html`
Next, create an HTML element that will contain the player:
`html`
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.
`javascript`
// 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.
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.
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.
`html
``
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.
The contents of this package are subject to the THEOplayer license.