Configuring the web embed
The MCLS web embed offers an easy way to integrate our video player—and additional features—into your own website. There are two ways to include the MCLS embed on your website, using either the standard method or the legacy method.
Standard method (recommended)
The standard method uses an HTML <script> tag and a <div> tag, and looks something like this:
<script async src="https://embed.mls.mycujoo.tv/embed.js"></script>
<div data-embed-id="EVENT_ID" data-public-key="PUBLIC_KEY" data-default-volume="1" data-show-fullscreen="false" style="width: 560px; min-height: 315px; background: #000;"></div>
The advantage of this method is that it allows two-way communication between between your webpage (i.e. the parent) and the MCLS embed (i.e. the child). This is especially advantageous in more advanced use-cases, e.g. when you want to get notified of certain events happening inside of the video player, such as when a stream has ended.
Tip: if you want to embed more than one video player on a single page, you only need to include the <script> tag once.
Legacy method (not recommended)
The legacy method uses an HTML <iframe> tag, and looks something like this:
<iframe src="https://embed.mls.mycujoo.tv/player/EVENT_ID?autoplay=true&publicKey=PUBLIC_KEY&showQualitySelector=true" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
This approach is generally not recommended because it cannot support all features that MCLS has to offer. However, we understand that you may be restricted from using the first approach, e.g. if you are not permitted to place <script> tags on your webpage, or if you are using a CMS and can only copy/paste an iframe URL into it.
Customising the experience
The MCLS web embed can be tailored to your needs, and this is done through parameters. Using the standard methods, these parameters are configured as properties of the <div> tag, using a data- prefix, followed by the name of the parameter. In the previous section, you can see data-show-fullscreen="false" as an example. When using the legacy method, these parameters are passed as URL parameters, and use lowerCamelCase. In the previous section, you can see showQualitySelector=true as an example.
What follows is a full list of available parameters, showing Standard/Legacy method parameter names.
Mandatory
data-embed-id / eventId - string
data-public-key / publicKey - string
Optional
data-autoplay / autoplay - boolean (true/false)
data-primary-color / primaryColor - string. Should be an RGB hexadecimal color code, e.g. #FF0000
data-default-volume / defaultVolume - float. Should be a value between 0-1 (0 for mute, 1 for 100%)
data-start-position / startPosition - float. Should be a value in seconds for the position where the video should start playing from.
data-ad-unit / adUnit - string (the iu query parameter from the IMA tag url)
data-ad-cust-params / adCustParams - string (url encoded values or valid json representing the custom parameters that should be added to the IMA tag url in the query parameter cust_params)
data-show-back-forward-buttons / showBackForwardButtons - boolean (true/false)
data-show-info-button / showInfoButton - boolean (true/false)
data-show-live-viewers / showLiveViewers - boolean (true/false)
data-show-seekbar / showSeekbar - boolean (true/false)
data-show-fullscreen / showFullscreen - boolean (true/false)
data-show-quality-selector / showQualitySelector - boolean (true/false)
data-show-volume / showVolume - boolean (true/false)
data-show-timers / showTimers - boolean (true/false)
data-show-chromecast / showChromecast - boolean (true/false)
data-show-picture-in-picture / showPictureInPicture - boolean (true/false)
data-identity-token / identityToken - string. Should be a JWT token for the mcls api
data-live-tolerance / liveTolerance - number of seconds. Number of seconds behind live that the video needs to be before being considered non-live. Note that this will only be used when playing at the live edge. Defaults to 15.
data-limit-auto-quality-to-player-size / limitAutoQualityToPlayerSize - boolean (true/false); If true, the player automatic quality selection will not choose a rendition that is larger than the player dimensions. Defaults to true.
data-plugin-config / pluginConfig - string (valid json representing various plugin configuration; currently only available for MUX; eg: '{"mux":{"debug":true}}' )
data-analytics-type / analyticsType - 'mux' / 'youbora'
data-analytics-account / analyticsAccount - string (youbora or mux account ids)
data-analytics-custom-params / analyticsCustomParams - string (url encoded values or valid json representing the analytics custom parameters or custom dimensions)
data-analytics-user-id / analyticsUserId - string (analytics pseudo user id)
Callback events:
Passing parameters is a one way communication, from your webpage to the embed. To enable the communication from the embed, to your webpage, custom events are fired on the <div> tag corresponding to each embed.
timeUpdate - The event is fired when the current playback position (currentTime) or the total duration (totalTime) of the embed video has changed. See an example of timeUpdate setup here.
viewChange - The event is fired when the view displayed by the player changes. The possible view options are:
NOT_FOUND - passed when the public key and event id combination is invalid or when the domain where the player is hosted is not valid for your organisation
GEOBLOCKED - passed when the event geoblocking settings are not valid from the country the request was made
AUTHORIZATION - passed when the event is behind a paywall and the current user (identityToken) does not have access to the event
CONCURRENCY_LIMIT - passed when the number of simultaneus sessions for watching an event by a user (identityToken) has been reached
UPCOMING - passed when the event stream has not started yet
VIDEO - passed when displaying the video player
LOADING - passed when showing a spinner
Read more about how to implement a more advanced Zoid Player Component.