A modern, feature-rich video player built with vanilla HTML, CSS, and JavaScript. This application provides a comprehensive video playback experience with playlist management, multiple viewing modes, and a sleek user interface.
🚀 Live Demo • 📋 Features • 🛠️ Installation • 🤝 Contributing • 📄 License
- High-quality video playback with support for multiple formats
- Play/Pause controls with visual feedback
- Skip forward/backward (10-second intervals)
- Volume control with mute/unmute functionality
- Playback speed control (0.5x to 2x)
- Progress bar with seek functionality
- Time display (current time / total duration)
- Add multiple videos to create custom playlists
- File picker for selecting video files from your computer
- Shuffle playlist for randomized playback
- Loop playlist or loop individual videos
- Delete videos from playlist with one click
- Clear entire playlist functionality
- Visual indication of currently playing video
- Fullscreen mode for immersive viewing
- Toggle via button, F11 key, or double-click on video
- Picture-in-Picture support for multitasking
- Keyboard accessibility with space/enter and F11 support
- Responsive design that works on different screen sizes
- Light/Dark theme toggle with local storage persistence
- Smooth animations and transitions
- Custom scrollbar styling
- Hover effects and interactive feedback
- Accessibility features with proper ARIA labels
- Modern Material Design-inspired controls
- Cross-browser compatibility (Chrome, Firefox, Safari, Edge)
- Error handling with console logging
- Local storage for theme preferences
- Media Session API metadata support (basic)
- No external dependencies for the frontend
- Express.js server for easy local development
- Node.js 16+ installed on your system
- Git (optional, for development)
-
Clone the repository
git clone https://github.com/your-username/videoplayer.git cd videoplayer -
Install dependencies
npm install
-
Start the development server
npm start
-
Open your browser
- The application will automatically open at
http://localhost:8000 - If it doesn't open automatically, navigate to the URL manually
- The application will automatically open at
[Dark theme video player interface - to be added]
[Light theme video player interface - to be added]
[Playlist features demonstration - to be added]
- Add Videos: Click the "+" icon or use the file picker to add video files
- Control Playback: Use the control buttons or keyboard shortcuts
- Manage Playlist: Add, remove, or reorder videos in your playlist
- Fullscreen Mode: Click the fullscreen button or press F11
- Toggle Theme: Use the theme toggle button to switch between light and dark modes
- Click play/pause button: Play or pause video
- Click volume control: Adjust volume level
- Click progress bar: Seek to specific time
- Double-click video: Toggle fullscreen mode
- Click playlist items: Switch to that video
- Spacebar: Play/Pause (when video is focused)
- Enter: Play/Pause (when video is focused)
- F11: Toggle fullscreen mode
videoplayer/
├── index.html # Main application file
├── server.js # Express server
├── package.json # Project configuration
├── README.md # Project documentation
└── node_modules/ # Dependencies (created after npm install)
npm start- Start the development servernpm run build- Build for distribution (creates executable)
The video player is built with vanilla technologies for easy customization:
- HTML Structure: Modify
index.htmlto change layout - Styling: Update CSS variables in the
<style>section for themes - Functionality: Extend JavaScript functions in the
<script>section
The application uses CSS custom properties for easy theming:
:root {
--color-bg: #111;
--color-text-main: #eee;
--color-bg-container: #333;
/* ... more variables */
}- Chrome: ✅ Fully supported
- Firefox: ✅ Fully supported
- Safari: ✅ Fully supported
- Edge: ✅ Fully supported
- Mobile browsers: ✅ Responsive design
The fullscreen feature allows you to:
- View videos in true fullscreen mode
- Use F11, double-click, or the button to toggle
- Exit fullscreen with the same method or ESC key
- Watch videos while working in other applications
- Available on supported browsers
- Toggle via the PiP button
- Support for multiple video formats
- Drag-and-drop file addition
- Persistent playlist during session
- Visual feedback for current video
- Automatic light/dark theme detection
- Manual theme toggle
- Smooth theme transitions
- Local storage preference saving
-
Videos not loading
- Ensure video files are in supported formats (MP4, WebM, etc.)
- Videos are loaded from local files, not URLs
-
Fullscreen not working
- Fullscreen requires user interaction to activate
- Check browser fullscreen permissions
-
Playlist not saving
- Playlist is session-based and resets on page refresh
- No cloud storage - videos must be re-added each session
The application includes basic error handling:
- Server connection error notifications
- Console logging for video loading errors
- Browser compatibility checks
- Fullscreen API error handling
We welcome contributions! Please read our contributing guidelines before submitting pull requests.
-
Fork the repository
git clone https://github.com/your-username/videoplayer.git cd videoplayer -
Create a feature branch
git checkout -b feature/your-feature-name
-
Install dependencies
npm install
-
Make your changes
-
Test your changes
npm start
-
Commit your changes
git add . git commit -m "Add your feature description"
-
Push to your fork
git push origin feature/your-feature-name
-
Submit a Pull Request
- Code Style: Follow existing patterns and conventions
- Testing: Test your changes thoroughly
- Documentation: Update documentation if needed
- Commits: Use clear, descriptive commit messages
🐛 Bug Reports
- Use the Issue Tracker
- Include steps to reproduce the bug
- Provide browser and OS information
- Include screenshots if relevant
💡 Feature Requests
- Check existing issues first
- Describe the feature clearly
- Explain why it would be useful
- Drag and drop file support
- Video thumbnail generation
- Playlist persistence
- Keyboard shortcuts enhancement
- Mobile responsive improvements
- Video format support expansion
npm start- Start the development servernpm run build- Build for distribution (creates executable)
videoplayer/
├── 📄 index.html # Main application file
├── 📄 server.js # Express server
├── 📄 package.json # Project configuration
├── 📄 README.md # Project documentation
├── 📄 .gitignore # Git ignore rules
├── 📄 LICENSE # License file
└── 📁 node_modules/ # Dependencies (created after npm install)
- Frontend: Vanilla HTML5, CSS3, JavaScript (ES6+)
- Backend: Node.js, Express.js
- Build: None (pure vanilla technologies)
- Package Manager: npm
This project follows standard security practices for web applications. Report security vulnerabilities by creating a private issue or contacting the maintainers directly.
This project is licensed under the GNU GPL Version 1 License - see the LICENSE file for details.
- Built with modern web technologies
- Uses Material Design principles
- Inspired by popular video player interfaces
- Optimized for performance and user experience
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: Contact Maintainer
⭐ If you find this project useful, please consider giving it a star on GitHub! ⭐
Made with ❤️ by Foliage Tree