---

🎥 Custom HTML5 Video Player

A lightweight, customizable, and feature-rich video player built using plain JavaScript and CSS. Includes essential video controls such as play/pause, volume adjustment, speed control, fullscreen mode, theater mode, mini-player, and more.

---

✨ Features

• Responsive Design: Works seamlessly on desktop & mobile devices.
• Supports Multiple Video Formats: (MP4, WebM, Ogg, etc.)
• Keyboard Shortcuts: for easy navigation.
• Custom Controls: Play/Pause, Volume, Speed Control, Fullscreen, Mini Player, Theater Mode.
• Loading Indicator: for better UX.
• Touch & Click Support: for mobile devices.
• Customizable: Easily modify styles & functionality.

---

📥 Installation

1. Include the Video Player in HTML

   Use the following HTML to include the video player in your page:

   <div
     class="nex-video-player"
     data-src="path/to/your/video.mp4"
     data-title="Video Title"
   ></div>

   Note: Replace "path/to/your/video.mp4" with your actual video file URL and update the "Video Title".

2. Link CSS Styles

   Include the necessary CSS to style the video player and controls.

   <link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/nexoscreator/[email protected]/video-player.min.css"
   />

3. Link the JavaScript

   Add the JavaScript code cdn link provided below to the functionality of the video player.

   <script
     src="https://cdn.jsdelivr.net/gh/nexoscreator/[email protected]/video-player.min.js"
     defer
   ></script>

---

🎯 Keyboard Shortcuts

This custom video player supports the following keyboard shortcuts to enhance your video playback experience:

Shortcut Key	Action	Description
F	Fullscreen Toggle	Enter or exit fullscreen mode.
→ (Right Arrow)	Forward	Skip the video forward.
← (Left Arrow)	Backward	Rewind the video.
T	Toggle Theater Mode	Switch between normal and theater modes.
I	Mini Player Mode	Activate or deactivate mini player view.
M	Mute/Unmute	Mute or unmute the video.
+	Increase Speed	Increase playback speed.
-	Decrease Speed	Decrease playback speed.

---

🎨 Customization

You can customize the CSS styles and JavaScript functionality according to your needs.

1. Clone the Repository:

   git clone https://github.com/nexoscreator/html5-custom-video-player.git
   cd html5-custom-video-player

2. Customize CSS: Edit the video-player.css file to change the styles.

3. Customize JavaScript: Customize the player controls by modifying video-player.js. You can update controls, navigation, or error handling as needed.

---

🔗 Useful Links

---

🤝 Contributing

We ❤️ contributions! Follow these steps to contribute:

1. 🍴 Fork the repository
2. 🌿 Create your feature branch (git checkout -b feature/AmazingFeature)
3. 💾 Commit your changes (git commit -m 'Add some AmazingFeature')
4. 🚀 Push to the branch (git push origin feature/AmazingFeature)
5. 🔃 Open a Pull Request

Check out our Contribution Guidelines for more details.

---

License 📄

This project is licensed under the MIT License. See the LICENSE file for details.

---

🌟 Star this project if you find it useful!

Created with ❤️ by @nexoscreator