@hyperstream/videoplayer
v0.1.11
Published
Hyperstream Video Player React Component
Readme
@hyperstream/videoplayer
The official React Video Player component used by Hyperstream. It supports HLS streaming, playlists, interactive popups, dual-mode docking, chapters, multi-language transcripts, and advanced analytics.
Installation
npm install @hyperstream/videoplayerBasic Usage
The player is designed to be a drop-in component.
1. Import the Component & Scoped Styles
import { HyperstreamVideoPlayer } from '@hyperstream/videoplayer';
// CRITICAL: You must import the CSS to get the player styling
import '@hyperstream/videoplayer/dist/styles.css';
export default function App() {
return (
<div style={{ maxWidth: '800px', margin: 'auto' }}>
<HyperstreamVideoPlayer
hyperstreamUrl="https://fahs.io/your-hls-stream.m3u8"
title="Welcome to the Course"
primaryColor="#6C5CE7"
autoPlay={true}
/>
</div>
);
}CSS Safety
This package is compiled using a zero-preflight strategy. All Tailwind classes are hard-scoped to the div[data-hyperstream-player] wrapper.
This guarantees that:
- The player will never inherit unwanted global styles from your application.
- The player will never bleed styles out and accidentally change the styling of your application buttons or typography.
Props Reference
| Prop | Type | Description |
|------|------|-------------|
| hyperstreamUrl | string | The default stream URL, usually pointing to an .m3u8 playlist. |
| playlist | object | An array of tracks for multi-video experiences. |
| primaryColor | string | Hex code. Automatically generates a complete UI color palette (dark/light hover states, sliders). |
| thumbnail | string | URL to the poster image shown before playback begins. |
| autoPlay | boolean | Whether to begin playback immediately (subject to browser policies). |
Non-React Environments (Wordpress, Webflow, Vanilla HTML)
If you are not using React, do not install this NPM package. Instead, use our Web Component script which loads an isolated iframe, guaranteeing zero Javascript or CSS conflicts with your CMS.
Place this in your HTML <head>:
<script src="https://video.flowautomate.com/player.js"></script>Then drop the tag anywhere on your page:
<hyperstream-video-player
src="https://fahs.io/your-video.m3u8"
primary-color="#FF0000"
title="My Lesson">
</hyperstream-video-player>