Web Video Player - Multimedia Project

A feature-rich HTML5 video player built with vanilla JavaScript, Canvas API, and modern web technologies. Created as part of the Multimedia course at CSIE - ASE Bucharest.

Features

Core Functionality (2.5 points)

• Dynamic Playlist Management
  • Add videos via drag-and-drop or file picker
  • Reorder videos using drag-and-drop
  • Delete videos from playlist
  • Automatic playback of next video

Advanced Canvas Controls (4 points)

• Semi-transparent overlay controls drawn directly on canvas:
  • Previous/Play/Pause/Next buttons
  • Progress bar with current time display
  • Volume control with visual indicator
• Live preview when hovering over progress bar
  • Shows thumbnail of the video frame at that moment
  • Real-time time display

Visual Effects

• Real-time video filters applied pixel-by-pixel:
  • Grayscale
  • Sepia
  • Color Inversion
  • None (original)

Technologies Used

• HTML5 - Semantic markup and Canvas element
• CSS3 - Modern styling with Flexbox
• Vanilla JavaScript - No frameworks, pure ES6+
• Canvas API - Pixel manipulation and custom controls
• File API - Drag-and-drop file handling

Technical Highlights

• Pixel-level manipulation using getImageData() and putImageData()
• Custom UI controls rendered entirely on canvas (no HTML overlays)
• Event-driven architecture with drag-and-drop support
• Real-time video processing at 30 FPS using setInterval()
• Dynamic canvas resizing based on video dimensions

Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Edge, Safari)
• Local web server (due to CORS restrictions)

Installation

1. Clone the repository:

git clone https://github.com/LeonardGeorgescuGL/web-video-player.git
cd Web Video Player LeosProject

2. Add your video files to the media/ folder (optional)

3. Run with a local server:

Option 1: Python

python -m http.server 8000

Option 2: VS Code Live Server

• Install "Live Server" extension
• Right-click on index.html → "Open with Live Server"

Option 3: Node.js

npx http-server

4. Open browser at http://localhost:8000

Usage

1. Add Videos:

   • Click on the drop zone or drag video files directly
   • Supports multiple file selection

2. Playback Controls:

   • Click on canvas to play/pause
   • Use Previous/Next buttons for navigation
   • Hover over progress bar to preview frames

3. Apply Effects:

   • Select effect from dropdown menu
   • Effects are applied in real-time

4. Manage Playlist:

   • Drag items to reorder
   • Click "Sterge" red button to remove videos

Project Structure

web-video-player/
│
├── indexVideo.html          # Main HTML structure
├── stylesVideo.css           # Styling and layout
├── scriptVideo.js           # Core JavaScript logic
├── README.md           # Documentation
│
└── media/              # Video files directory
    └── videos.mp4

Academic Information

Course: Multimedia (Cybernetics,Statistics and Business Computer Science)
Institution: Academia de Studii Economice (ASE) Bucharest
Year: 2025-2026 Grade: 10 of 10

Code Structure

Main Components

• desenare() - Main rendering loop (30 FPS)
• aplicareEfect() - Pixel-by-pixel effect processing
• desenareControaleSiPreview() - Canvas UI rendering
• verificaClickControale() - Mouse interaction handling
• actualizarePlaylist() - Dynamic playlist management

Key Features Implementation

Canvas Controls: All UI elements (buttons, progress bar, volume) are drawn directly on canvas using pixel manipulation, not HTML overlays.

Video Preview: Uses a temporary video element to seek to the hovered position and captures a frame to display as thumbnail.

Drag & Drop: Implements HTML5 Drag and Drop API for both file uploads and playlist reordering.

Known Issues

• Preview generation may lag on slower machines
• Large video files (>100MB) may cause memory issues
• Some video codecs may not be supported in all browsers

Future Improvements

• Add fullscreen mode
• Implement keyboard shortcuts
• Add playback speed control
• Support for subtitles
• Playlist save/load functionality
• More visual effects (blur, brightness, contrast)

License

This project is created for educational purposes as part of the Multimedia course at ASE Bucharest.

Author

Leonard-Dimitrie Georgescu

• GitHub: @LeonardGeorgescuGL(https://github.com/LeonardGeorgescuGL)
• Student ID: S23000747

🙏 Acknowledgments

• Professor Ionita Cristian - Course instructor
• ASE Bucharest - CSIE Department
• MDN Web Docs - Canvas API reference

---

⭐ If you found this project helpful, please consider giving it a star!