THEOlive - How to customize your THEOlive NPM player
by Alberto Nantiat on June 14, 2022
We explained how to play back hesp.live 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 hesp.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.
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.
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
<div id="containerDiv" style="width:1000px;height:400px"></div>
CSS: make the player fill the container completely
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 */
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
CSS - Style it
// Make the notice appear if the player is muted on
For more guided UX examples, visit our developer page with further detailed tutorial, such as custom 'Play' button, changing control bar, etc.
No Comments Yet
Let us know what you think