https://github.com/dds05/vertical-player
video.js based player built with nextjs to facilitate a vertical scrolling experience.
https://github.com/dds05/vertical-player
vertical-player vertical-video-player videojs
Last synced: 5 months ago
JSON representation
video.js based player built with nextjs to facilitate a vertical scrolling experience.
- Host: GitHub
- URL: https://github.com/dds05/vertical-player
- Owner: dds05
- License: other
- Created: 2025-07-05T17:57:48.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-12-28T11:29:12.000Z (6 months ago)
- Last Synced: 2025-12-29T18:07:08.644Z (6 months ago)
- Topics: vertical-player, vertical-video-player, videojs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vertical-player
- Size: 122 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
## Vertical Player
A video.js based video player built with Next.js, focused on immersive, scrollable vertical video playback (similar to TikTok/Reels).
## 👉🏻 Installation
```
npm install vertical-player
```
## 👨🏻💻 Usage
```
"use client"
import {VerticalPlayer} from 'vertical-player/esm/index.es.js';
export default function Home() {
const handleLike=(e)=>{
console.log(e);
}
const handleShare=(e)=>{
console.log(e);
}
const DATA: any = [
{
id: 1,
tag: "BRAND",
asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
description: 'This is a simple description which describes the video'
},
{
id: 2,
tag: "BRAND",
asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
description: 'This is a simple description which describes the video'
},
{
id: 3,
tag: "BRAND",
asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
description: 'This is a simple description which describes the video'
},
{
id: 4,
tag: "BRAND",
asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
description: 'This is a simple description which describes the video'
},
{
id: 5,
tag: "BRAND",
asset_url: 'https://www.abc.com/~dnn/clips/RW20seconds_2.mp4',
description: 'This is a simple description which describes the video'
},
];
return (
);
}
```
## 👉🏻 Options
| Option | Type | Required | Description |
| ------- | -------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data` | `object[]` | ✅ Yes | Array of objects containing url of the asset and metadata: id, title, description |
| `handleLike` | `fn()` | ❌ No | Callback fn emitted when like button is clicked
| `handleShare` | `fn()` | ❌ No | Callback fn emitted when share button is clicked
## Demo
https://github.com/user-attachments/assets/44fc682d-dea6-4013-8daf-113058a68cf6
## ❤️ Support
https://buymeacoffee.com/dds05