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.
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.
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.
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.
data-embed-id / eventId - string
data-public-key / publicKey - string
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)
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.