┌───────────┐ ┌───────┐
│ vdt-react ---------------- ( hooks, providers, wrappers ) --> │ │
└───────────┘ │ │
┌─────────┐ │ │
│ vdt-api ------------------------- ( API js Promises ) ------> │ │
└─────────┘ │ │
┌────────────────┐ │ │
│ vdt-materialui -- (Customized Material UI React library) ---> │ │
└────────────────┘ │ Your │
┌─── player components ──┐ │ SPA │
│┌───────────────────────┐ │ │
open-source player packages --> ││ vdt-videojs-react ---> │ │
│└───────────────────────┘ │ │
┌─────────────┐ │┌───────────────────────┐ │ │
│ vdt-videojs ------------------> ││ vdt-videojs-vue (?) ---> │ │
└─────────────┘ │└───────────────────────┘ └───────┘
(pure js) └ wrapped for frameworks ┘
vdt-videojs sets out to build a pure javascript video player on top of video.js and delivers more features with a "familiar" user interface / experience. There is an every-so-often manually deployed live demo here.
vdt-videojs is written in ES6 Javascript and has minimal dependencies; It's wrapable for supported frameworks.
Additionally vdt-videojs package exports other pure js components closely related to Player (SeekBar, TimeCodeDisplay, ExternalControls and others) for use with react / other frameworks within their respective wrappers.
See the vdt-videojs-react docs for use with React.
cd
into vdt-videojs
directory and run
npm i
npm run start
Edit the code in ./src/
directory and observe changes at localhost:2222 (should auto-open)
npm run build
Outputs CSS and comment stripped ES6 javascript; Addittionally outputs CJS, EMS and UMD bundles.
You can also use
npm run build:watch
this will output to /lib/
directory for development needs while working with other packages on the fly.
- HLS / DASH (Adaptive ) ?
- Poster frame generated from video during upload from API side
- Airplay, Chromecast functionality check
- Fast forward / Fast backward functionality
- Result view improvements
- Suggested videos after video playback has ended