At the moment we support the following players:

• Wistia

• YouTube

• Vimeo

• Kaltura

• JwPlayer

• VideoJS

• FlowPlayer

• H5P

• OpenEdx

• HTML5

• Custom Player

Setup

Simply add the following script:

<script src="https://app.annoto.net/annoto-bootstrap.js"></script>

And bootstrap Annoto with the desired Application configuration:

<script>
  // Application configuration
  var config = {
​
    /* Below are the only Mandatory configuration options */
    clientId: '', /* set to your client id after registration. */
    widgets: [
      {
        player: {
          type:    'youtube', /* type of the player */
          element: 'player-element' /* DOM element or id of the player */
        }
      }
    ],
    demoMode: true, /* set to false when you have your clientId */
​
  };
​
  window.Annoto.boot(config);
</script>

requirejs(["https://app.annoto.net/annoto-bootstrap.js"], function(Annoto) {
    //This function is called when annoto-bootstrap.js is loaded.
    Annoto.boot(config);
});

Configuration

Annoto application providers flexibility in how it integrates in the website. For full configuration options, please refer to the API Reference. Annoto API Typescript interfaces is available via the @annoto/widget-api package.

Using the API

Annoto application exposes an API. To get access to the API use the "ready" event.

For example to load new application configuration attaching the widget to new dynamically loaded video, or just switching to another video on the page:

  import { Annoto, AnnotoApi, AnnotoConfig } from '@annoto/widget-api';
  
  interface Global extends Window {
    Annoto: Annoto;
  }
  const global = window as Global;
  
  const config: AnnotoConfig = {
    /* ... */
  };
​
  let annotoAPI: AnnotoApi;
  global.Annoto.on('ready', (api: AnnotoApi) => {
    annotoAPI = api;
  });
  global.Annoto.boot(config);
​
  function yourTrigger(newConfiguration) {
    annotoAPI.load(newConfiguration).then(() => {
        console.log('Loaded new Configuration!');
    }).catch((err) => {
      console.error(err);
    });
  }

  // Application configuration
  var config = {
    /* ... */
  };
  
  var annotoAPI;
  window.Annoto.on('ready', function (api: AnnotoApi) {
    annotoAPI = api;
  });
  window.Annoto.boot(config);
​
  function yourTrigger(newAnnotoApplicationConfiguration) {
    annotoAPI.load(newAnnotoApplicationConfiguration, function(err) {
        if (err) {
            // error while loading the new configuration
          return;
        }
        console.log('Loaded new Configuration!');
    });
  }

For full documentation, please refer to the AnnotoApi Reference.

Annoto Timeline

Annoto Timeline allows users to spot points of interest. The timeline can be embedded in the player or it can be positioned below the player. Lets explore the timeline configuration options:

By default, the timeline will be positioned under the player:

If overlayVideo is true, the timeline will be positioned inside the controls of the player:

timeline: {
    overlayVideo: true
}

Browser Compatibility

Annoto is compatible with all major evergreen browsers (Edge, Chrome, Mozilla, Safari). IE11 is supported as well.

Chrome usually gives best user experience.

​