bunnyHLS

A full-stack npm package for BunnyNet HLS video playback with React components and Next.js API handlers.

Installation

npm install bunnyhls

Features

• 🎥 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

Usage

Step 1: Create the API Route

Next.js Pages Router (/app/api/video-token.js)

import { createBunnyHandler } from 'bunnyhls/server';

export default createBunnyHandler(process.env.BUNNY_SECURITY_KEY);

Next.js App Router (/app/api/video-token/route.ts)

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);
}

Step 2: Use the Component

Next.js App Router (/app/page.tsx)

import { BunnyVideoPlayer } from 'bunnyhls/client';

export default function Page() {
  return (
    <BunnyVideoPlayer 
      videoId="7f142e98-c6df-4e3c-8ee4-9b98b6abf73f"
      tokenUrl="/api/video-token"
    />
  );
}

API

BunnyVideoPlayer Component

Props:

• videoId (string, required): The BunnyNet video ID
• tokenUrl (string, required): The API endpoint that returns signed URLs
• libraryHost (string, required): Your BunnyNet library host
• controls (boolean, optional): Show video controls (default: true)
• style (CSSProperties, optional): Custom styles for the video element
• className (string, optional): Custom CSS class for the video element

createBunnyHandler Function

Creates a handler function for your API route.

Simple usage:

createBunnyHandler(securityKey)

Advanced usage:

createBunnyHandler({
  securityKey: 'your-security-key',
  libraryHost: 'vz-c561dc91-370.b-cdn.net',
  expirationTime: 3600,
  isDirectory: true
})

Options:

• securityKey (string, required): Your BunnyNet security key
• libraryHost (string, optional): Your BunnyNet library host
• expirationTime (number, optional): Token expiration time in seconds (default: 3600)
• isDirectory (boolean, optional): Whether to sign as directory (default: true)

Environment Variables

Make sure to set your BunnyNet security key:

BUNNY_SECURITY_KEY=your-security-key-here

How It Works

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

License

ISC