ivid | Vaadin

� (cyoa) interactive video player �



< interactive video player >

npm-published vanillajs webcomponents-publised

license-apache-2 donate


IVID is an interactive video player for modern browsers.

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

Try it online.

How to use it

<!doctype html>
    <script src="//unpkg.com/@ividjs/ivid@latest/dist/ivid.min.js" type="module" async></script>
    <!-- Optional Styles -->
    <link href="//unpkg.com/@ividjs/ivid@latest/dist/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));

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

Also see: IVID-model and IVID-styles documentation


  • 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

git clone git@github.com:ividjs/ivid.git

Install development dependencies

npm i # or yarn

Run development server

npm run dev

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


player controls

choices controls


Link to this version
ImportedReleased 30 January 2019Apache License 2.0
Framework Support
Browser Independent
Install with
npm install @ividjs/ivid"@1.0.7"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.7