https://github.com/lunanezha/react-video-player
A custom video player with React, Vite, Ionic, and TailwindCSS without any Libraries
https://github.com/lunanezha/react-video-player
ionic react tailwindcss typescript video-player vite
Last synced: 4 months ago
JSON representation
A custom video player with React, Vite, Ionic, and TailwindCSS without any Libraries
- Host: GitHub
- URL: https://github.com/lunanezha/react-video-player
- Owner: LunaNezha
- Created: 2024-12-01T17:30:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-05T14:21:48.000Z (over 1 year ago)
- Last Synced: 2025-04-11T14:48:35.502Z (about 1 year ago)
- Topics: ionic, react, tailwindcss, typescript, video-player, vite
- Language: TypeScript
- Homepage:
- Size: 4.12 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://lunanezha.com/)
[](www.linkedin.com/in/luna-nezha/)
# **React Video Player**
A custom video player built using **React**, **Vite**, **Ionic**, and **TailwindCSS**, designed to function without relying on third-party libraries. This lightweight and flexible solution emphasizes a modern tech stack for crafting custom multimedia experiences.
## 🛠 **Features**
- Built with **React**, **Vite**, and **TypeScript**.
- Styling powered by **TailwindCSS** for rapid UI development.
- Cross-platform capabilities using **Ionic** framework.
- **Zero dependency** on third-party video libraries.
- Video playback support for **common formats** (e.g., MP4, WebM).
- **Play**, **pause**, and seek **controls**.
- **Volume** adjustment and **mute/unmute** options.
- **Fullscreen** toggle.
- **Encrypt** video source
- Support .m3u8 format using **ffmpeg**
## 💻 **Tech Stack**
- **React**: Component-based UI framework.
- **Vite**: Fast build tool for modern web projects.
- **Ionic**: Framework for cross-platform mobile/web apps.
- **TailwindCSS**: Utility-first CSS framework.
- **TypeScript**: Static type checking for JavaScript.
## 🚀 **Run Locally**
Clone the project
```bash
git clone https://github.com/LunaNezha/react-video-player
```
Go to the project directory
```bash
cd react-video-player
```
Install dependencies
```bash
npm install
```
Start the server
```bash
ionic serve
```
## ✅ **Running Tests**
To run tests, run the following command
```bash
npm run test
```
## 🤝 **Contributing**
Contributions are always welcome!
If you’d like to improve this project:
- Fork the repository.
- Create your branch: git checkout -b feature/your-feature.
- Commit your changes: git commit -m "Add your message".
- Push to the branch: git push origin feature/your-feature.
- Open a Pull Request.
## 💡 **Support**
For support, email mahdie.nezhadhosseini@gmail.com.
## 📝 **License**
This project is licensed under the
[MIT](https://choosealicense.com/licenses/mit/) License. See the LICENSE file for details.