Video Annotations

A Next.js application that allows users to create and manage time-based annotations on a video. Users can add text labels or icons that appear at specific coordinates and time intervals during video playback.

🚀 Live Demo

Check out the deployed project here:
Video Annotations on Vercel

✨ Features

• Interactive Video Player: Plays a sample video (Big Buck Bunny) to visualize annotations in real-time.
• Dynamic Annotations:
  • Text: Add custom text labels.
  • Icons: Choose from a predefined set of icons (🔴, 🔵, ⚠️, ✅, etc.).
• Precise Timing:
  • Set Start and End times using MM:SS format.
  • Validation ensures annotations do not exceed the video's total duration.
• Responsive Positioning:
  • Position elements using X and Y percentages (0-100%).
  • Elements are responsive and stay correctly positioned relative to the video size.
• CRUD Operations: Add, Edit, and Delete annotations dynamically.

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Deployment: Vercel

💻 Getting Started

To run this project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-username/video-annotations.git
   cd video-annotations

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Run the development server:

   npm run dev

4. Open the app: Open http://localhost:3000 with your browser to see the result.

📝 Usage

1. Add an Entry:
   • Enter X and Y coordinates (0-100%).
   • Select Element Type (Text or Icon).
   • Enter content or pick an icon.
   • Set Time Start and Time End (e.g., 00:05 to 00:10).
   • Click Add.
2. Watch: Play the video. The annotation will appear at the specified location during the configured time window.
3. Manage: Use the table below the form to Edit or Delete existing annotations.