Full-stack npm package for BunnyNet HLS video playback with React components and Next.js API handlers
npm install bunnyhlsA full-stack npm package for BunnyNet HLS video playback with React components and Next.js API handlers.
``bash`
npm install bunnyhls
- 🎥 React component for HLS video playback with auto-token refresh
- 🔐 Server-side URL signing handler for Next.js
- 🔄 Automatic token refresh on 403 errors
- 📦 TypeScript support
- ⚡ Works with both Next.js App Router and Pages Router
#### Next.js Pages Router (/app/api/video-token.js)
`javascript
import { createBunnyHandler } from 'bunnyhls/server';
export default createBunnyHandler(process.env.BUNNY_SECURITY_KEY);
`
#### Next.js App Router (/app/api/video-token/route.ts)
`typescript
import { createBunnyHandler } from 'bunnyhls/server';
import { NextRequest } from 'next/server';
const handler = createBunnyHandler({
securityKey: process.env.BUNNY_SECURITY_KEY!,
libraryHost: process.env.LIBRARY_HOST, //eg. hvz-c561dc91-370.b-cdn.net
expirationTime: 3600, // optional, default: 3600
isDirectory: true // optional, default: true
});
export async function GET(request: NextRequest) {
return handler(request);
}
`
#### Next.js App Router (/app/page.tsx)
`tsx
import { BunnyVideoPlayer } from 'bunnyhls/client';
export default function Page() {
return (
tokenUrl="/api/video-token"
/>
);
}
`
Props:
- videoId (string, required): The BunnyNet video IDtokenUrl
- (string, required): The API endpoint that returns signed URLslibraryHost
- (string, required): Your BunnyNet library hostcontrols
- (boolean, optional): Show video controls (default: true)style
- (CSSProperties, optional): Custom styles for the video elementclassName
- (string, optional): Custom CSS class for the video element
Creates a handler function for your API route.
Simple usage:
`javascript`
createBunnyHandler(securityKey)
Advanced usage:
`javascript`
createBunnyHandler({
securityKey: 'your-security-key',
libraryHost: 'vz-c561dc91-370.b-cdn.net',
expirationTime: 3600,
isDirectory: true
})
Options:
- securityKey (string, required): Your BunnyNet security keylibraryHost
- (string, optional): Your BunnyNet library hostexpirationTime
- (number, optional): Token expiration time in seconds (default: 3600)isDirectory
- (boolean, optional): Whether to sign as directory (default: true)
Make sure to set your BunnyNet security key:
`bash`
BUNNY_SECURITY_KEY=your-security-key-here
1. The BunnyVideoPlayer` component requests a signed URL from your API endpoint
2. The API handler uses your security key to sign the HLS playlist URL
3. The component loads the signed URL using hls.js
4. If a 403 error occurs, the component automatically requests a new token and retries
ISC