@theolive/player
Advanced tools
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.
Install using your favorite package manager for Node (such as npm or yarn):
npm install @theolive/player
THEOLivePlayer.jsContains the video player and channel logic.
THEOLive.sw.jsThis 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.
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');
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
FAQs
The official THEOlive video player.
The npm package @theolive/player receives a total of 48 weekly downloads. As such, @theolive/player popularity was classified as not popular.
We found that @theolive/player demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.