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

This article aims to answer common questions related to manipulating the player.

Throughout this article, you'll find mentions of THEOplayer. THEOplayer is the web player that Zype implements throughout the platform.

How can I track when the player is ready?

Zype allows for the addition of a `window.zypeInitialize = function() {}` function to your web application. When the player emits its `canplay` event, this function is called. Within the function, you can initialize any custom functionality such as adding buttons, custom events, etc. THEOplayer emits the `canplay` event when the player can resume playback of the media data. If you are dealing with multiple players on the page, we recommend that you do not utilize this method for initializing your players, and instead refer to the next bullet point.

Note* The full THEOplayer event reference can be found here

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

There is only one way to do this as of now, and that would be to wait for the THEOplayer variable to become available, therefore giving you access to its `THEOplayer.players` array. You can then loop through each player, adding event listeners, custom elements, etc. However, with this method, there might be a race condition present that may result in a player not making it into the array before you loop through it, this needs to be accounted for while building the solution.

window.THEOplayer vs window.theoplayer

`window.THEOplayer` is a reference to the THEOplayer object. If you have multiple players on the page, you can access them all via `window.THEOplayer.players`

`window.theoplayer` is a reference to the first player that was initialized on the page. In `window.THEOplayer.players`, the first initialized player is the last one in the array.

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

Yes, a script tag is required for each video that you want to embed on the page. However, this can be done dynamically through JavaScript. For example - if you have an array of video IDs, you can loop through it and dynamically initialize each player on the page instead of hard-coding a script tag for each one. We require this script tag because we need to put the request through various checks within our system in order to return a proper response.

Can I swap the source of a player to change its video?

No. Since a script tag is required for every video, you would have to do this dynamically as well. Our Playlist embed operates in the same fashion. When you click one of the thumbnails to change the video, the underlying div with the ID of `zype_<VIDEO_ID>` is changed, and so is the script tag that is associated with it, therefore initiating a new player request.

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

Custom player buttons are supported, and they can have whatever functionality you desire. THEOplayer has a great article on adding these. The example they use is for a common use case: adding a button to skip forward 10 seconds, and adding a button to skip backwards 10 seconds. That guide can be found here.

Am I able to hide some of the player elements?

Player elements can be hidden with CSS overrides. There isn't a specific "best-practice" around this. Rather, you can just target a specific player element and use CSS to hide it.

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

Although THEOplayer does support this, Zype does not encode segment metadata today into our manifests. However, adding this feature can be discussed. Implementation of this feature would most likely engage Zype Professional Services.