# 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); ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.annoto.net/developers/player/getting-started-1.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.