ivid

by ividjs

� (cyoa) interactive video player �

ivid-logo

IVID

< interactive video player >

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