@hesp.live/player v1.2.2
HespLivePlayer
The HespLivePlayer contains the video player to play back hesp.live streams on your web page. It's intended for
hesp.live customers that want to host the player themselves.
This is an alternative to
the embedded player (embed.js)
that is hosted on hesp.live's CDN. It is recommended to use the embedded player if you don't strictly have to host the
files yourself.
Installation
Install using your favorite package manager for Node (such as npm or yarn):
npm install @hesp.live/playerFiles
hesp_live_player.js
Contains the video player and channel logic.
hesp_live_sw.js
This is a Service Worker that allows playback of hesp.live streams on iOS Safari. It is important that this file is hosted on the same domain as the webpage over https.
Usage
Add the HespLivePlayer to your HTML page:
<script type="text/javascript" src="url/to/hesp_live_player.js"></script>Next, check if the player requires a service worker to play:
<script type="text/javascript">
if (HespLivePlayer.requiresServiceWorker()) {
navigator.serviceWorker.register("hesp_live_sw.js")
}
</script>Finally, create the player with the channel-id:
<script type="text/javascript">
const player = new HespLivePlayer('<your-channel-id>');
document.body.append(player);
</script>This will add the player to the page as a Custom Element, and you can access it with:
document.querySelector('hesp-live-player');Example
This example assumes you have completed the getting started tutorial and your channel is up and running.
This is a minimal page that creates a HespLivePlayer:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="hesp_live_player.js"></script>
</head>
<body>
<script type="text/javascript">
// Check if the player needs a service worker and register it if needed.
if (HespLivePlayer.requiresServiceWorker()) {
navigator.serviceWorker.register("hesp_live_sw.js")
}
// Create the player.
const player = new HespLivePlayer('<your-channel-id>');
// Add the player to the page at your desired location:
document.body.append(player);
</script>
</body>
</html>Make sure to change <your-channel-id> with your actual channel-id.
For more information, please visit the hesp.live documentation website: https://developers.hesp.live