MyCujoo LiveServices logo
HomeProductsHelp Center
Start streaming today! Sign in
Sign In

Home

Welcome

Product & Features

Getting started

Glossary

API Documentation

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-secondary-color / secondaryColor - 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-event-info-button / showEventInfoButton - 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)


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.