Create Your own HTML5 Custom Video Player

A custom video player built using plain JavaScript for a personalized media experience.

Published on: 16/10/2024

This project features a custom video player built using plain JavaScript. It includes various functionalities such as play/pause control, volume adjustment, playback speed settings, fullscreen toggle, and more.

🔍 Project Overview

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

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".

Link CSS Styles

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

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/nexoscreator/html5-custom-video-player@v0.5.3/video-player.min.css"
/>

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/html5-custom-video-player@v0.5.3/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.

Clone the Repository:

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

Customize CSS: Edit the video-player.css file to change the styles.
Customize JavaScript: Customize the player controls by modifying video-player.js. You can update controls, navigation, or error handling as needed.

🤝 Contributing

We ❤️ contributions! Follow these steps to contribute:

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

📖 See our Contribution Guidelines for more details.

📄 License

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

📬 Contact & Community

💬 Join us on Discord: Click Here
🐦 Follow on Twitter: @nexoscreator
📧 Email: contact@nexoslabs.site

If you find this project helpful, please consider starring ⭐ the repository or sponsoring 💖 on GitHub!

Created with ❤️ by @nexoscreator