@vidispine/vdt-videojs v24.1.0

About

┌─────────┐                                                     ┌───────┐
│ vdt-api --------- (Vidispine API js Promises) --------------> │       │
└─────────┘                                                     │       │
┌────────────────┐                                              │       │
│ vdt-materialui -- (Customized Material UI React library) ---> │       │
└────────────────┘                                              │  Your │
                                  ┌ video player components     │  SPA  │
                                  │┌───────────────────────┐    │  app  │
  open-source player packages --> ││ vdt-vue (future plans) --> │       │
                                  │└───────────────────────┘    │       │
┌─────────────┐                   │┌───────────────────────┐    │       │  
│ vdt-videojs ------------------> ││ vdt-react - (wrappers) --> │       │
└─────────────┘                   │└───────────────────────┘    └───────┘
   (pure js)                      └

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

Output is ES6 javascript, saved in /lib/

You can also use

npm run build:watch

this will output to /lib/ directory for development needs while working with other packages.

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