Skip to content

A modern, theme aware video player for html videos.

License

Notifications You must be signed in to change notification settings

Rajaniraiyn/rajeo

Repository files navigation

📺 rajeo

A modern, theme aware video player for html videos.

License Release Gitter Gitter Members Checks Stars Forks Opened Issues CodeQL


TABLE OF CONTENTS
🤔 How?
🙄 What?
🙌 Features
📜 Plan
👨‍💻 Local Development
🤝 Contributors
🎟️ License

🤔 How?

  1. Add below script tag in your html containing valid video tag
<script src="http://unpkg.com/rajeo@latest" defer></script>

OR  Add the below script tag in your html containing valid video tag

<script type="module">
  import * as rajeo from "https://unpkg.com/rajeo@latest";
  window.onload = rajeo;
</script>

OR  Add the following in your ES6 and call rajeo() separately but the html must have a valid video tag

import * as rajeo from "https://unpkg.com/rajeo@latest";
  1. Thats it, the script itself takes care of others (i.e. It converts the normal video tag to rajeo)

🙄 What?

Before adding script
Before
After adding script
After

🙌 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

📜 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

👨‍💻 Local Development

To clone and build packages of this repository you'll need Git and Node.js (which comes with npm) installed on your device. Copy and paste the following in your command line:

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

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

🤝 Contributors

contributors

Made with contributors-img.

🎟️ License

MIT


Made with ❤️ by Rajaniraiyn

^ back to top ^