> For the complete documentation index, see [llms.txt](https://docs.annoto.net/developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.annoto.net/developers/player/getting-started-1.md). # Getting Started {% hint style="success" %} 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 :) {% endhint %} ## Setup The player is officially available via CDN and npm.\ Annoto works out of the box with not only HTML ` ``` {% endtab %} {% endtabs %} ## Creating a Player Annoto player is exposed as [UMD module](https://github.com/umdjs/umd), 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. {% hint style="info" %} If you are using a javascript module loader such as RequireJS. Annoto exposes a standard [UMD](https://github.com/umdjs/umd). For example for requireJS: ```javascript requirejs(["https://player.annoto.net/index.js"], function(nn) { // }); ``` {% endhint %} The main player class is [AnnotoPlayer](https://annoto.github.io/player/classes/Player.AnnotoPlayer.html). 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) {% hint style="info" %} The annotoPlayer() helper is available only for the CDN. When using the npm package, please use the AnnotoPlayer constructor directly (see below) {% endhint %} The simplest way to create a player is using the [`annotoPlayer()` method](https://annoto.github.io/player/modules/Main.html#annotoPlayer): {% tabs %} {% tab title="Typescript" %} ```typescript import { annotoPlayer, IPlayerOptions } from '@annoto/player'; import { IConfig } from '@annoto/widget-api'; const options: IPlayerOptions; const wConfig: Omit = { 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); }); ``` {% endtab %} {% tab title="HTML" %} ```markup ``` {% endtab %} {% endtabs %} ### Creating player using the AnnotoPlayer constructor The Player instance can be created using the [AnnotoPlayer](https://annoto.github.io/player/classes/Player.AnnotoPlayer.html) constructor which allows the most flexibility: {% tabs %} {% tab title="Typescript" %} ```typescript import { AnnotoPlayer, IPlayerOptions, WidgetService, IWidgetService, getConsoleLogger, } from '@annoto/player'; import { IConfig } from '@annoto/widget-api'; const options: IPlayerOptions; // optional player options const wConfig: Omit = { 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 { 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); }); ``` {% endtab %} {% tab title="HTML" %} ```html ``` {% endtab %} {% endtabs %} ## Player Options Annoto Player extends standard [VideoJS options](https://docs.videojs.com/tutorial-options.html) with some advanced functionality, for more details, please refer to the [PlayerOptions](https://annoto.github.io/player/interfaces/scripts_player_interfaces.PlayerOptions.html). {% hint style="success" %} PlayerOptions extends VideoJS options, so all options supported by the videojs player can be used. {% endhint %} ## Using the Widget API The most common widget related api is available directly via the [AnnotoPlayer](https://annoto.github.io/player/classes/Player.AnnotoPlayer.html) instance, for example: `setupWidget, loadWidget, destroyWidget`. For more advanced usages the [IAnnotoApi](https://annoto.github.io/widget-api/interfaces/Api.IAnnotoApi.html) can be obtained using `await player.getWidgetApi()` ## Authenticating the User The most recomended wait is to provide the User's SSO token to the widget configuration as show in [Creating A Player](#creating-a-player). An alternative way is to authenticate the user dynamically [Using the Widget API](#using-the-widget-api) ```typescript const api = await player.getWidgetApi(); const ssoToken = '...'; api.auth(ssoToken); ```