@vidispine/vdt-videojs

About

┌───────────┐                                                   ┌───────┐
│ 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.

Get started with development

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)

Building for distribution

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.

Future roadmap:

• 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