1.2.2 • Published 3 years ago

@hesp.live/player v1.2.2

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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/player

Files

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

1.2.2

3 years ago

1.2.0

3 years ago

1.2.1

3 years ago

1.1.0

3 years ago

1.0.0

3 years ago