:tv: rajeo

A modern, theme aware video player for html videos.

| TABLE OF CONTENTS | | :-------------------------------------------------------------------------: | | :thinking: How? | | :roll_eyes: What? | | :raised_hands: Features | | :scroll: Plan | | :man_technologist: Local Development | | :handshake: Contributors | | :tickets: License |

:thinking: 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";

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

:handshake: Contributors

Made with contributors-img.

:tickets: License

MIT

Made with :heart: by Rajaniraiyn

^ back to top ^