https://github.com/rajaniraiyn/rajeo
A modern, theme aware video player for html videos.
https://github.com/rajaniraiyn/rajeo
css html-video html5-video html5-video-player javascript js video video-player
Last synced: 9 months ago
JSON representation
A modern, theme aware video player for html videos.
- Host: GitHub
- URL: https://github.com/rajaniraiyn/rajeo
- Owner: Rajaniraiyn
- License: mit
- Created: 2021-09-20T11:13:59.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-04-04T20:53:16.000Z (over 1 year ago)
- Last Synced: 2025-10-14T08:05:18.014Z (9 months ago)
- Topics: css, html-video, html5-video, html5-video-player, javascript, js, video, video-player
- Language: JavaScript
- Homepage:
- Size: 361 KB
- Stars: 14
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :tv: rajeo
A modern, theme aware video player for html videos.
[](LICENSE) [](../../releases/latest) [](https://gitter.im/rajeo/community) [](https://gitter.im/rajeo/community)  [](../../stargazers) [](../../network/members) [](../../issues?q=is%3Aopen) [](https://github.com/Rajaniraiyn/rajeo/actions/workflows/codeql-analysis.yml)
---
| TABLE OF CONTENTS |
| :-------------------------------------------------------------------------: |
| [:thinking: How?](#thinking-how) |
| [:roll_eyes: What?](#roll_eyes-what) |
| [:raised_hands: Features](#raised_hands-features) |
| [:scroll: Plan](#scroll-plan) |
| [:man_technologist: Local Development](#man_technologist-local-development) |
| [:handshake: Contributors](#handshake-contributors) |
| [:tickets: License](#tickets-license) |
## :thinking: How?
1. Add below script tag in your html containing valid video tag
```html
```
*OR* Add the below script tag in your html containing valid video tag
```html
import * as rajeo from "https://unpkg.com/rajeo@latest";
window.onload = rajeo;
```
*OR* Add the following in your ES6 and call `rajeo()` separately but the html must have a valid video tag
```javascript
import * as rajeo from "https://unpkg.com/rajeo@latest";
```
2. Thats it, the script itself takes care of others (i.e. It converts the normal video tag to rajeo)
## :roll_eyes: What?
| Before _adding script_ |
| :--------------------------------------------------------------------------------------------------------------: |
|  |
| After _adding script_ |
| :-------------------------------------------------------------------------------------------------------------: |
|  |
## :raised_hands: Features
- Modern
- Beautiful
- Load Progress (Buffer Progress)
- PiP (Picture-in-Picture) Mode
- Fullscreen
- Top title bar with icon
- Theme aware
- Cross platform
- Mobile friendly
- Responsive
- Zero dependencies
- CSS first approach
## :scroll: Plan
- Keyboard shortcuts
- Playback rate
- Volume
- Support popular streaming services
- Gestures
- Piracy protection
- React component
- Custom events
- Custom video parser
- Port to web assembly (aka wasm) and web worker
## :man_technologist: Local Development
To clone and build packages of this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your device. Copy and paste the following in your command line:
```sh
git clone https://github.com/Rajaniraiyn/rajeo.git
cd rajeo
npm install
npm run build
```
Then check the dist folder you will see dist folder with following structure
```sh
dist/
├─ cjs/
│ ├─ index.js
│ ├─ index.js.map
│ ├─ index.min.js
│ ├─ index.min.js.map
├─ esm/
│ ├─ index.js
│ ├─ index.js.map
│ ├─ index.min.js
│ ├─ index.min.js.map
├─ umd/
│ ├─ index.js
│ ├─ index.js.map
│ ├─ index.min.js
│ ├─ index.min.js.map
├─ style.css
├─ style.css.map
```
## :handshake: Contributors
[](https://github.com/rajaniraiyn/rajeo/graphs/contributors)
Made with [contributors-img](https://contrib.rocks).
## :tickets: License
[MIT](LICENSE)
---
**Made with :heart: by _Rajaniraiyn_**
**[`^ back to top ^`](#)**