THEOlive - How to customize your THEOlive NPM player

Written by Alberto Nantiat | June 14, 2022

We explained how to play back THEOlive streams on your web page by using the embed script in our developer documentation. This allows you to get started with real-time streaming at scale very quickly and provides you with a number of options for customizing your THEO live player, such as changing the colors of your player, showing a logo and enabling auto-play.

Using a self-hosted player will involve some extra work to set up, but in exchange you can access the player itself, which means you can further customize it through an elementary player API and CSS. The guide on how to use a self-hosted player through NPM will get you started. In this blogpost, we will explain the types of customization you can do and provide you with an example.

CSS changes

You can decide to customize your player aspect in CSS. There are many customization options such as tweaking the big play button or changing it completely, adapting the UI to your use case or graphic identity, changing colors, moving/hiding/showing elements, changing the shape of the player, and much more.

JavaScript changes

You may also need to control the player through JavaScript. We expose an API that can let you mute/unmute the player as well as pause/play it, change the volume, etc.

Example

In this example, we will place the player in a (very horizontal) container, a new <div> element rather than directly in the <body> (original example); change the big play button, giving it a new aspect; and we will have a notice appear to unmute the player when playback starts muted.

Step 1 - Place the player in a container

HTML: include an element on your page in which your player will be appended

CSS: make the player fill the container completely

.video-js {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
}

JavaScript: append the player in the container we created rather than to the body

/*document.body.append(player);*/
document.querySelector('#containerDiv').append(player);

Step 2 - Change the big play button

CSS - Remove the current svg and replace it with another svg. It’s possible to also use another image format.

/* Set other image */
.theoplayer-skin .vjs-big-play-button {
content: "";
background: url("data:image/svg+xml;base64,PD94bWwgd…vc3ZnPg==")
no-repeat 0 0!important;
background-size: 100%!important;
display: block;
}
/* Remove default THEOplayer image */
.theo-big-play-button-svg-container svg {
display: none;
}

Step 3 - If playback starts muted, warn the viewer and give the possibility to unmute it by clicking the warning

HTML - Include an element with a simple text to convey your message

<div id="mutedNotice">
<h3>Your player is muted</h3>
<p>Click here to unmute your player</p>
</div>

CSS - Style it

#mutedNotice {
text-align:center;
border-radius:1em;
border:1px solid #ccc;
padding: 1em 2em;
display:none;
width:max-content;
margin:1em auto;
background-color:rgba(255,255,0,.1);
position:relative;
box-shadow: 2px 2px 5px #ccc;
cursor: pointer;
}

JavaScript - Use the player API to detect when the player is playing and if it starts muted. If it does, provide the option for the user to unmute it easily

// Make the notice appear if the player is muted on
let mutedNotice = document.querySelector('#mutedNotice');
let myInterval = setInterval(showMutedNotice, 500);

function showMutedNotice() {
if (!player.paused) {
if (player.muted) {
mutedNotice.style.display = "block";
}
clearInterval(myInterval);
}
}

// make the notice unmute the player and disappear when clicked
mutedNotice.addEventListener('click', ()=>{
player.muted = false;
mutedNotice.style.display = "none";
});

For more guided UX examples, visit our developer page with further detailed tutorial, such as custom 'Play' button, changing control bar, etc.

View full post