@theolive/player

The official THEOlive video player.

1.3.0
npm

Version published: 2 years ago

Maintainers: 1

Created: 3 years ago

Source

THEOLivePlayer

The THEOLivePlayer contains the video player to play back THEOlive streams on your web page. It's intended for THEOlive customers that want to host the player themselves.

This is an alternative to the embedded player (embed.js) that is hosted on THEOlive'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 @theolive/player

Files

`THEOLivePlayer.js`

Contains the video player and channel logic.

`THEOLive.sw.js`

This is a Service Worker that allows playback of THEOlive streams on iOS Safari. It is important that this file is hosted on the same domain as the webpage over https.

Usage

Add the THEOLivePlayer to your HTML page:

<script type="text/javascript" src="url/to/THEOLivePlayer.js"></script>

Next, check if the player requires a service worker to play:

<script type="text/javascript">
    if (THEOLivePlayer.requiresServiceWorker()) {
        navigator.serviceWorker.register("THEOLive.sw.js")
    }
</script>

Finally, create the player with the channel-id:

<script type="text/javascript">
    const player = new THEOLivePlayer('<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('theo-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 THEOLivePlayer:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script type="text/javascript" src="THEOLivePlayer.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Check if the player needs a service worker and register it if needed.
            if (THEOLivePlayer.requiresServiceWorker()) {
                navigator.serviceWorker.register("THEOLive.sw.js")
            }
            // Create the player.
            const player = new THEOLivePlayer('<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 THEOlive documentation website: https://developers.theo.live/docs

Keywords

FAQs

What is @theolive/player?

Is @theolive/player well maintained?

Package last updated on 29 Sep 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install