Ividjs NPM | npm.io

About

IVID is an interactive video player for modern browsers.

Full VanillaJS webcomponent. Plug-n-play ready, easy setup and use.

How to use it

<!doctype html>
<html>
  <head>
    <script src="ivid.min.js" type="module" async></script>
    <!-- Optional Styles -->
    <link href="ivid.min.css" rel="stylesheet">
    <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <script async>
      let model = { ... }; // Setup the video-map model
      document.getElementById("sample").setAttribute("model", JSON.stringify(model));
    </script>
  </head>

  <body>
    <i-video id="sample" controls autoplay playsinline></i-video>
  </body>
</html>

Also see: IVID-model and IVID-styles documentation

Features

Next video selection (the interactive bit)
Simple single-setup: ivid-model
Inherited HTML5 video properties
Full video controls on-screen
Customizable controls: ivid-styles
Key-mapping for keyboard video controls
- Play/Pause: spacebar
- Mute/Unmute: m
- Fullscreen toggle: f
- Volume up/down: arrow_up / awrrow_down
- Forward/backward: arrow_right / arrow_left

Please take a look at the current TODO list, any contribution is welcome

Development setup

Clone ivid dev branch

git clone -b dev git@github.com:ividjs/ivid.git

npm i # or yarn
npm run dev

Open browser on localhost:3000, the sandbox should be ready to play

Screenshots

player controls

choices controls

ivid interactive video player webcomponent js

@everything-registry/sub-chunk-1943 @zalastax/nolb-iv

1.0.0

5 years ago