JavaScript API

The glomex-player is designed to be integrated as simply as possible, with minimal amounts of configuration necessary. At the same time, the glomex-player is highly flexible and has numerous customization options available in order to best fit with the existing layout of your website.

Integration

There are different variants how the glomex player can be integrated onto a site:

<html>
<body>
<!-- ... -->
<!-- can also be loaded in head or async -->
<script src="https://player.glomex.com/integration/1/glomex-player.js"></script>
<!-- The classic web component integration -->
<glomex-player
  data-integration-id="REPLACE_WITH_INTEGRATION_ID"
  data-playlist-id="REPLACE_WITH_PLAYLIST_OR_VIDEO_ID">
</glomex-player>
<!-- In case the CMS does not allow glomex-player as element name -->
<div
  data-glomex-player="true"
  data-integration-id="REPLACE_WITH_INTEGRATION_ID"
  data-playlist-id="REPLACE_WITH_PLAYLIST_OR_VIDEO_ID"
></div>
<!-- In case no JavaScript is allowed on the publisher page -->
<iframe 
  allow="autoplay *; fullscreen *" 
  allowfullscreen 
  referrerpolicy="unsafe-url" src="https://player.glomex.com/integration/1/iframe-player.html?integrationId=REPLACE_WITH_INTEGRATION_ID&playlistId=REPLACE_WITH_PLAYLIST_OR_VIDEO_ID">
</iframe>
<!-- in case we want to integrate on a Google AMP page -->
<amp-iframe
  src="PATH_TO_SOME/iframe-player.html?integrationId=REPLACE_WITH_INTEGRATION_ID&playlistId=REPLACE_WITH_PLAYLIST_OR_VIDEO_ID"
  sandbox="allow-scripts allow-same-origin allow-popups"
  allow="autoplay *; fullscreen *"
  referrerpolicy="unsafe-url"
  frameborder="0"
  width="16"
  height="9"
  layout="responsive"
></amp-iframe>
<!-- via JavaScript -->
<script>
  const player = document.createElement('glomex-player');
  player.dataset.integrationId = 'REPLACE_WITH_INTEGRATION_ID';
  player.dataset.playlistId = 'REPLACE_WITH_PLAYLIST_OR_VIDEO_ID';
  document.body.appendChild(player);
</script>
<!-- dynamically via JavaScript -->
<script>
  const player = document.createElement('glomex-player');
  document.body.appendChild(player);
  player.addEventListener('connect' function() {
    player.setup({
      integrationId: 'REPLACE_WITH_INTEGRATION_ID',
      playlistId: 'REPLACE_WITH_PLAYLIST_OR_VIDEO_ID'
    });
  });

</script>
<!-- ... -->
</body>
</html>

Initialization

The glomex-player is built up as Web Component which lets the glomex-player feel like a usual HTML element. As soon as the player is added to the HTML DOM and the glomex-player.js script got loaded, the player creates an iFrame inside of its DOM structure, which then itself loads the video player there. The iFrame can not be interrupted inadvertently by your site or vice versa. In order to control the player behavior you can call methods on the glomex-player. To get the status of the player you can listen to events. Both methods and events are documented below.

Because the actual video player is rendered in an iFrame it means that moving the player inside of the HTML DOM always causes a re-initialization of the whole player. You are able to listen to this event by 'connect'.

Usage Example

const player = document.querySelector('glomex-player');
  player.addEventListener('connect', function () {
    // you then can use `setup(...)`
  });
  // `ready` only gets triggered after succesful setup.
  // Either when valid data attributes were given
  // or when setup(...) was called
  player.addEventListener('ready', function () {
    // you now can use `play()` / `pause()`
  });

Methods

setup(data)

To setup a new integration session. Can be called after the connect event.

data

property default type Example
integrationId null string '2zh3y5k2d2j63o0to9'
playlistId null (optional) string 'pl-bgoos2lsegkh'
articleId null (optional) string 'DPA-12345'
aspectRatio null (optional, defaults to 16:9) string '1:1'

activate()

To activate the video element within the iFrame. This is important when you want to capture a user-interaction (mostly click) to be forwarded to the video-player before doing a setup / play call. With this activation you then can asynchronously setup a player and call always play with sound at a later stage without a synchronous user interaction.

Example

When there is a user interaction, which triggers a longer running player setup, we should activate the player beforehand, so that future play API calls work.

<html>
  <head>
    <script src="https://player.glomex.com/integration/1/glomex-player.js"></script>
  </head>
  <body>
    <button id="mySelfmadePlayButtonSomewhereInMyContent">PLAY</button>
    <script>
      const myPlayButton = document.querySelector('#mySelfmadePlayButtonSomewhereInMyContent');
      myPlayButton.addEventListener('click', function() {
        const player = document.querySelector('glomex-player');
        player.activate();
        player.setup({
          integrationId: '2zh3y5k2d2j63o0to9',
          playlistId: 'pl-bgoos2lsegkh'
        });
        player.addEventListener('ready', function() {
          player.play();
        });
      });
    </script>
    <glomex-player></glomex-player>
  </body>
</html>

reset()

Soft resets the player, with all given data and also the reserved space on the website will be released. The player itself will be still available and the connection between glomex-player and iFrame will remain.

const player = document.querySelector('glomex-player');
  player.reset();

isPlaying()

Returns a boolean if the player is currently playing.

play()

Plays the player which will trigger the play event as well. First available after the ready event.

const player = document.querySelector('glomex-player');
  player.play();

pause()

Pauses the player which will trigger the pause event as well. First available after the ready event.

const player = document.querySelector('glomex-player');
  player.pause();

Events

Event Name Description
connect The event is fired when glomex-player has built up the communication to the iFrame
playlistcreate The event is fired when the glomex-player succesfully loaded the requested playlist. In case the player is placed in a hidden container it needs to be unhidden when this event occurs. Otherwise the player cannot be rendered and the ready event won’t be triggered in Chrome.
ready The event is fired when the player has loaded the content. After this event got fired, the methods play and pause can be used.
playlistitemselect Fire when the specific content was selected from the playlist for playback
playlistitembegin It gets fired per initial content playback for each playlist item. This event can be fired multiple times.
contentbegin The event is fired once per content when its first frame got displayed. This event fires per content in a playlist
contentcomplete The event is fired once per content when its last frame played (before postroll). This event can be fired multiple times.
playlistitemcomplete The event is fired when the content block has ended (after postroll).
adbegin The event is fired whenever the system has started playing the ad. This event can be fired multiple times.
adcomplete The event is fired whenever the system has finished playing the ad. This event can be fired multiple times.
integrationabort The event is fired when the integration was aborted.
play The event is fired whenever the system is trying to play the player. This event can be fired multiple times.
pause The event is fired whenever the system is trying to pause the player. This event can be fired multiple times.

adding event listener

You can add listeners for the events above using general addEventListener method on a player element.

Example

const player = document.querySelector('glomex-player');
  player.addEventListener('playlistitembegin', function (event) {
    // content has started
    console.log(event.detail);
    // or your code
  });

event.detail payload

On most of the events additional data is available as detail object on event within the callback.

event.detail for all events

property type Example
environment object { pageUrl: 'https://publisher.com', ...}, details about the environment like pageUrl, origin, …
player object { muted: false, contentCurrentTime: 12.34, adCurrentTime: undefined }. adCurrentTime is only filled with the current time of the ad when a linear ad is played or paused.

Additional event.detail for ready

property type Example
config object { colors: { activeColor: 'red' } }, configuration details about the current integration

Additional event.detail for playlistcreate

property type Example
playlist array [{ id: 'v-bk2fv0ozf1bl', ... same as content detail below ... ]}
playlistContext object { id: 'pl-12345' }, details about the requested playlist

Additional event.detail for playlistitemselect, playlistitembegin, contentbegin, contentcomplete, playlistitemcomplete, adbegin, adcomplete, play and pause

Property Type Example
content.id string 'v-bk2fv0ozf1bl'
content.title string 'Usain Bolt vs Timbsy: Lay-Off Challenge'
content.description string 'When Usain Bolt took on Timbsy at the lay-off ...'
content.duration number 60.45
content.poster string '<https://url-to-poster>'
content.thumbnail string '<https://url-to-thumbnail>'
content.isRecommendation boolean true
content.show string 'The Voice'
content.channel string 'ProSieben'
content.category string 'entertainment'
content.contentOwner object {id: 't-123', name: 'ProSieben'}
content.keywords array ['music', 'entertainment']
content.taxonomies array All assigned taxonomies
content.teaser object {poster: '<https://url-to-poster>', title: 'Usain Bolt vs Timbsy: Lay-Off Challenge', thumbnail: '<https://url-to-thumbnail>',video: '<https://url-to-teaser-video'}>

Additional event.detail for adbegin and adcomplete

property type Example
ad.adSessionId UUID string '550e8400-e29b-11d4-a716-446655440000'
ad.breakName string 'preroll'
ad.breakIndex integer 0
ad.positionIndex integer 0 (position of ad in break)
ad.duration number 20.3
ad.mimetype string 'video/mp4'

Additional event.detail for integrationabort

property type Example
player.error.name string 'PlaylistError'
player.error.message string 'There was no content assigned'
player.error.code number 404

Examples

const player = document.querySelector('glomex-player');
  player.addEventListener('playlistitembegin', function (event) {
    console.log(event.detail.content.id);
    const contentId = event.detail.content.id;
    // e.g. send tracking pixel
  });
const player = document.querySelector('glomex-player');
  player.addEventListener('adbegin', function (event) {
    const adBreakName = event.detail.ad.breakName;
    // e.g. send tracking pixel
  });