Common Questions Around Manipulating the Zype Player via web SDK/API

This article answers frequently asked questions about customizing and extending the functionality of the Zype Player powered by Bitmovin on the web.

Note: If you're using a custom integration that references our legacy THEOplayer implementation, please review our Web Player Migration Guide and Player Event Framework documentation to ensure compatibility with the new player.

How can I track when the player is ready?

Zype supports a global callback function, window.zypeInitialize = function() {}, which is invoked once the player is fully instantiated and ready. Under the hood, this corresponds with the bitmovin.player.PlayerEvent.Ready event. This is the ideal place to attach custom event listeners, modify the player UI, or inject custom logic.

If you're embedding multiple players, you should avoid relying on window.zypeInitialize and instead listen for readiness using the player instance’s .on() method:

player.on(bitmovin.player.PlayerEvent.Ready, () => {
  console.log('Player is ready');
});

How can I handle and customize multiple players on the same page?

With Bitmovin, each player instance is created and managed independently. Unlike the old THEOplayer.players array, the new player does not expose a global registry of player instances.

Instead, you should store references to each Bitmovin player manually in your application logic. For example:

const players = [];

videoIds.forEach((videoId, index) => {
  const containerId = `player-container-${index}`;
  const config = { key: 'YOUR_BITMOVIN_LICENSE_KEY' };
  const player = new bitmovin.player.Player(document.getElementById(containerId), config);

  player.load({
    source: {
      hls: `https://player.zype.com/VIDEO_ID.m3u8`,
    }
  });

  players.push(player);
});

This approach gives you full control over multiple player instances without relying on a global player array.

Do I need to use the player embed/script tag for every video?

For standard Zype embeds, yes—each player requires its own embed code to initiate playback. However, if you're building a custom integration using the Bitmovin player SDK, you can programmatically load new sources into a single player instance without needing new script tags.

Example of source swapping:

player.load({
  source: {
    hls: 'https://player.zype.com/VIDEO_ID.m3u8'
  }
});

This is a major improvement over the previous THEOplayer approach, which required a new script tag per video.

Can I add buttons to the player, such as skip or rewind?

Yes, the Bitmovin player allows full UI customization, including custom buttons. Buttons can be injected into the player DOM or overlaid externally using JavaScript.

Example: Skip forward 10 seconds

const skipButton = document.createElement('button');
skipButton.textContent = 'Skip +10s';
skipButton.onclick = () => {
  const currentTime = player.getCurrentTime();
  player.seek(currentTime + 10);
};
document.body.appendChild(skipButton);

More advanced UI plugins and overlays are supported using Bitmovin’s UI customization framework.

Am I able to hide some of the player elements?

Yes. The Bitmovin player UI can be customized using CSS or through configuration options. You can override or hide default controls using CSS selectors or by modifying the UI configuration object at player init.

Example (CSS override):

.bitmovinplayer .bmpui-ui-playbacktogglebutton {
  display: none;
}

Can I provide the player with segment metadata to display chapter information?

Bitmovin supports metadata cues and chapter markers through ID3 tags and other mechanisms embedded in HLS manifests.

However, Zype does not currently include segment-level metadata (e.g., chapters or timed metadata) in the HLS manifests by default. If this is a requirement for your use case, please reach out to Zype Professional Services to discuss implementation.