https://github.com/imkkingshuk/next-video
Next-Video: Your All-in-One Video Optimization Solution for React and Next.js! Effortlessly optimize and enhance video delivery with lazy loading, responsive video sources, HLS support, and more. Perfect for modern web apps, Next-Video ensures seamless integration and performance-focused video playback. 🎥✨
https://github.com/imkkingshuk/next-video
hls-live-streaming hls-player next-video nextjs nextjs-video nextjs-video-streaming react-video-player video-optimization video-player video-player-library video-player-nodejs video-streaming video-streaming-nodejs
Last synced: 2 months ago
JSON representation
Next-Video: Your All-in-One Video Optimization Solution for React and Next.js! Effortlessly optimize and enhance video delivery with lazy loading, responsive video sources, HLS support, and more. Perfect for modern web apps, Next-Video ensures seamless integration and performance-focused video playback. 🎥✨
- Host: GitHub
- URL: https://github.com/imkkingshuk/next-video
- Owner: ImKKingshuk
- License: gpl-3.0
- Created: 2024-11-15T18:37:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-11-15T19:58:04.000Z (11 months ago)
- Last Synced: 2025-01-23T18:48:43.164Z (9 months ago)
- Topics: hls-live-streaming, hls-player, next-video, nextjs, nextjs-video, nextjs-video-streaming, react-video-player, video-optimization, video-player, video-player-library, video-player-nodejs, video-streaming, video-streaming-nodejs
- Language: TypeScript
- Homepage:
- Size: 64.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Next-Video
Next-Video: Your All-in-One Video Optimization Solution for React and Next.js! Effortlessly optimize and enhance video delivery with lazy loading, responsive video sources, HLS support, and more. Perfect for modern web apps, Next-Video ensures seamless integration and performance-focused video playback. 🎥✨
## Features
- **Optimized Video Playback**: Built for modern web development, Next-Video provides lazy loading, responsive video sources, and HLS streaming.
- **Responsive Video Support**: Define multiple sources for adaptive streaming and responsive design, making your videos look great on any screen.
- **HLS Streaming Support**: Automatically integrates HLS.js for live streaming or adaptive bitrate playback.
- **Lazy Loading**: Save bandwidth by loading videos only when they appear in the viewport.
- **Poster and Placeholder Support**: Add fallback visuals, including blurred placeholders, for a polished experience.
- **Custom CDN Integration**: Easily transform video URLs using your preferred CDN path logic.
- **SSR Friendly**: Fully compatible with server-side rendering, ideal for Next.js and similar frameworks.
- **TypeScript Support**: Enjoy full typing, code completion, and type safety for a better developer experience.
## Installation
Install `next-video` using your preferred package manager:
### Bun
```bash
bun add next-video
```
### npm
```bash
npm install next-video
```
### pnpm
```bash
pnpm add next-video
```
### yarn
```bash
yarn add next-video
```
## Usage
### Basic Setup
Import the `Video` component and pass your video configuration:
```tsx
import React from 'react';
import { Video } from 'next-video';
export default function ExamplePage() {
return (
My Awesome Video
);
}
```
### Advanced Features
#### **Responsive Videos**
Provide multiple video sources with responsive media queries for better performance across devices:
```tsx
```
#### **HLS Support**
Use HLS streaming with live or adaptive bitrate content:
```tsx
```
#### **Lazy Loading**
Improve performance by loading videos only when they appear in the viewport:
```tsx
```
#### **Custom CDN Integration**
Transform video URLs using your custom CDN function:
```tsx
import { cdnURL } from 'next-video';
// Your custom CDN logic
const customCDN = (path: string) => `https://mycdn.example.com${path}`;
;
```
## API Reference
### `Video`
The `Video` component is the core of Next-Video. It provides a declarative way to define optimized video playback in your app.
**Props**:
| Prop | Type | Default | Description |
| ------------- | -------------------------------- | ------------ | -------------------------------------------------------- |
| `src` | `string` | `undefined` | The video source URL. |
| `sources` | `ResponsiveVideoSource[]` | `[]` | Array of responsive video sources. |
| `poster` | `string` | `undefined` | The poster image URL. |
| `placeholder` | `string` | `undefined` | The placeholder image URL (e.g., for a blurred preview). |
| `lazy` | `boolean` | `false` | Whether to enable lazy loading. |
| `hls` | `boolean` | `false` | Whether to enable HLS streaming support. |
| `preload` | `'auto' \| 'metadata' \| 'none'` | `'metadata'` | Specifies how the browser should preload the video. |
| `controls` | `boolean` | `true` | Whether to show video controls. |
| `autoPlay` | `boolean` | `false` | Whether the video should autoplay. |
| `muted` | `boolean` | `false` | Whether the video should be muted. |
| `loop` | `boolean` | `false` | Whether the video should loop after playback. |
## License
This project is licensed under the GPL-3.0-or-later License.