Get started

� (cyoa) interactive video player �

ivid-logo

IVID

< interactive video player >


npm-published vanillajs webcomponents-publised

license-apache-2 donate


About

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>
<html>
  <head>
    <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));
    </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

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


Screenshots

player controls

choices controls

Install

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

Dependencies