LogoLogo
Home
  • Introduction
  • Widget
    • Getting Started
    • Advanced Workflows
    • Theming
    • API Reference
    • Playground
  • dashboard
    • Course Dashboard Embed
  • Annoto Player
    • Getting Started
    • Advanced Workflows
    • API Reference
    • Playground
  • Kaltura Plugin
    • Getting Started
    • Setup the Plugin
    • Customise Annoto Widget configuration
    • Using Annoto Widget API
  • Kaltura Plugin (V2 Legacy)
    • Getting Started
    • Setup using Universal Studio (KMC)
    • Customise Annoto Widget configuration
    • Using Annoto Widget API
    • Setup using Javascript (Optional)
  • Wistia Plugin
    • Getting Started
    • Setup Annoto Plugin
    • Customise Widget Configuration
    • Using Widget API
  • Integrations
    • SSO (Single Sign On)
    • Webhook
Powered by GitBook
On this page
  • Setup
  • Creating a Player
  • Creating player using the annotoPlayer helper (CDN)
  • Creating player using the AnnotoPlayer constructor
  • Player Options
  • Using the Widget API
  • Authenticating the User

Was this helpful?

Export as PDF
  1. Annoto Player

Getting Started

PreviousCourse Dashboard EmbedNextAdvanced Workflows

Last updated 1 year ago

Was this helpful?

If you are looking for industry leading Video Player with dual synchronous video playback, advanced layout capabilities and the power of Annoto interactivity, you are in the right place :)

Setup

The player is officially available via CDN and npm. Annoto works out of the box with not only HTML <script> tag, but also with all major bundlers/packagers/builders, such as Browserify, WebPack, etc.

$ npm install @annoto/player

The package includes full typings and can be used in typescript/ES6/flow projects.

<body>
    <script src="https://player.annoto.net/index.js"></script>
</body>
<script>
    // Annoto modules is available at 'nn' global object:
    // nn.annotoPlayer
</script>

Creating a Player

Annoto player is exposed as , meaning it offers compatibility with the most popular script loaders and can be imported as commonjs/amd/es6. If you are not using any standard loader the player will be exposed on window as global variables.

If you are using a javascript module loader such as RequireJS. Annoto exposes a standard . For example for requireJS:

requirejs(["https://player.annoto.net/index.js"], function(nn) {
    //
});

The main player class is . After you have the player instance it can be used to load video sources, dynamically control Widget, get access to Widget API and much more.

Creating player using the annotoPlayer helper (CDN)

The annotoPlayer() helper is available only for the CDN. When using the npm package, please use the AnnotoPlayer constructor directly (see below)

The simplest way to create a player is using the :

import { annotoPlayer, IPlayerOptions } from '@annoto/player';
import { IConfig } from '@annoto/widget-api';

const options: IPlayerOptions;
const wConfig: Omit<IConfig, 'widgets'> = {
    clientId: '...', // [mandatory for widget] the clientId provided by Annoto
    ssoToken: '...', // JWT user SSO token (recomended, but can be dynamicaly authenticated using the API as well)
};
let player: AnnotoPlayer;

annotoPlayer(document.querySelector('annoto-player'), options).then((p) => {
    player = p;
    return Promise.all([
        player.loadSrc({
            src: 'https://www.youtube.com/watch?v=1T9EZi7KJcc',
            type: 'video/youtube'
        }),
        player.setupWidget(wConfig),
    ]);
}).then(() => {
    return player.loadWidget(); // until this api call, the widget is not shown
}).catch((err) => {
    console.error('player setup error: ', err);
});
<body>
    <annoto-player></annoto-player>
</body>

Creating player using the AnnotoPlayer constructor

import {
    AnnotoPlayer,
    IPlayerOptions,
    WidgetService,
    IWidgetService,
    getConsoleLogger,
} from '@annoto/player';
import { IConfig } from '@annoto/widget-api';

const options: IPlayerOptions; // optional player options
const wConfig: Omit<IConfig, 'widgets'> = {
    clientId: '...', // [mandatory for widget] the clientId provided by Annoto
    ssoToken: '...', // JWT user SSO token (recomended, but can be dynamicaly authenticated using the API as well)
};
// IMPORTANT: there must be only a single WidgetService on a page
// same widgetService must be used for all the players on a page
const widgetService = new WidgetService(); 

async function setupPlayer(el: HTMLElement, opt?: IPlayerOptions): Promise<AnnotoPlayer> {
    const pl = new AnnotoPlayer(
        getConsoleLogger('AnnotoPlayer'),
        widgetService,
    );
    
    await pl.setup(el, opt);
    return pl;
}

let player: AnnotoPlayer;
setupPlayer(document.querySelector('annoto-player'), options).then((p) => {
    player = p;
    return Promise.all([
        player.loadSrc({
            src: 'https://www.youtube.com/watch?v=1T9EZi7KJcc',
            type: 'video/youtube'
        }),
        player.setupWidget(wConfig),
    ]);
}).then(() => {
    return player.loadWidget(); // until this api call, the widget is not shown
}).catch((err) => {
    console.error('player setup error: ', err);
});
<body>
    <annoto-player></annoto-player>
</body>

Player Options

PlayerOptions extends VideoJS options, so all options supported by the videojs player can be used.

Using the Widget API

Authenticating the User

const api = await player.getWidgetApi();
const ssoToken = '...';
api.auth(ssoToken);

The Player instance can be created using the constructor which allows the most flexibility:

Annoto Player extends standard with some advanced functionality, for more details, please refer to the .

The most common widget related api is available directly via the instance, for example: setupWidget, loadWidget, destroyWidget.

For more advanced usages the can be obtained using await player.getWidgetApi()

The most recomended wait is to provide the User's SSO token to the widget configuration as show in .

An alternative way is to authenticate the user dynamically

UMD module
UMD
AnnotoPlayer
annotoPlayer() method
AnnotoPlayer
VideoJS options
PlayerOptions
AnnotoPlayer
IAnnotoApi
Creating A Player
Using the Widget API