@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 109 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 uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.