https://github.com/dilshodbek-nodejs/video-player-watermark
A simple video player using HTML, CSS, JS, and a backend, with a dynamic and randomly positioned watermark.
https://github.com/dilshodbek-nodejs/video-player-watermark
player vanilla-javascript video video-player watermark-tools watermark-video watermarking
Last synced: 6 months ago
JSON representation
A simple video player using HTML, CSS, JS, and a backend, with a dynamic and randomly positioned watermark.
- Host: GitHub
- URL: https://github.com/dilshodbek-nodejs/video-player-watermark
- Owner: dilshodbek-nodejs
- Created: 2025-01-28T11:40:19.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-01-28T11:51:40.000Z (8 months ago)
- Last Synced: 2025-03-26T15:50:52.986Z (7 months ago)
- Topics: player, vanilla-javascript, video, video-player, watermark-tools, watermark-video, watermarking
- Language: HTML
- Homepage:
- Size: 965 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Video Player with Dynamic Watermark
📽️ **A simple video player with dynamically positioned watermark using HTML, CSS, JS, and a backend**
## Features
- 🎥 **Video Playback**: Supports MP4 videos via HTML5 `` tag.
- 🔀 **Dynamic Watermark**: Text watermark (e.g., user ID) displayed over the video.
- 🎲 **Random Positioning**: Watermark moves to random locations every 2 seconds.
- ⏱️ **Visibility Control**: Watermark appears for 2 seconds, hides for 5 seconds.
- 🎨 **Customizable Style**: Adjust font size, opacity, color via CSS.
- 🖥️ **Responsive Design**: Works on all screen sizes.
## Backend Features (Optional)
- 🔒 User authentication to generate unique watermarks.
- 📦 Video file management API.
- ⚙️ Watermark configuration stored in a database.
## Technologies
- **Frontend**: HTML5, CSS3, Vanilla JavaScript
- **Backend**: Node.js, Express.js
- **Tools**: Git, npm
## Installation
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/video-player-watermark.git
cd video-player-watermark
```
2. **Install dependencies:**
```bash
npm install express
```
3. Place your video file in the videos folder (rename it to video.mp4)
4. **Start the server:**
```bash
npm run dev
```