Limeplay is a React based Headless UI library made to work with HTML5 & Shaka Player that allows you to build stunning, accessible and modern looking Media Players with ease. It exposes several hooks and highly configurable components using which you can build any functional Media Player like Netflix, Youtube, Hulu, Hotstar, without having to worry about the underlying player logic while adhering to accessibility best practices.
- 📋 Documentation
- 🚀 Features
- 📦 Installation
- 💻 Usage
- 👋 Support
- 📝 Contributing
- ⚖️ License
👉 It's the https://docs.limeplay.me website for the latest version of Limeplay.
To use Limeplay UI components, all you need to do is install the
@limeplay/core package and its peer dependencies:
$ yarn add @limeplay/core @limeplay/shaka-player
# or
$ npm i @limeplay/core @limeplay/shaka-playerTo start using the components, please follow these steps:
- Player Setup
import { useShakaPlayer } from "@limeplay/shaka-player";
import { LimeplayProvider, OverlayOutlet, MediaOutlet } from "@limeplay/core";
export default function Player() {
const createPlayer = useShakaPlayer();
return (
<LimeplayProvider>
<OverlayOutlet createPlayer={createPlayer}>
<PlayerOverlay /> {/* Your custom overlay component */}
</OverlayOutlet>
<MediaOutlet>
<video controls={false} playsInline autoPlay={false} />
</MediaOutlet>
</LimeplayProvider>
);
}- Configure Playback and Controls Overlay
import { useLimeplayStore, useLimeplayStoreAPI } from "@limeplay/core";
import { useEffect } from "react";
export default function PlayerOverlay() {
const playback = useLimeplayStore((state) => state.playback);
const player = useLimeplayStore((state) => state.player);
const demoPlabackUrl =
"https://storage.googleapis.com/nodejs-streaming.appspot.com/uploads/f6b7c492-e78f-4b26-b95f-81ea8ca21a18/1642708128072/manifest.mpd";
useEffect(() => {
if (player && player.getLoadMode() === 1) {
const playerConfig = player.getConfiguration();
player.load(demoPlabackUrl);
}
}, [player, playback]);
return (
<div className={classes.overlayWrapper}>
<ControlsOverlay /> {/* Your custom controls component */}
</div>
);
}More guides on how to get started are available here For issues, discussion, and support, please join our Discord Server.
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT © WINOFFRG