Contact us Create app

Directory

← Back

ivid

� (cyoa) interactive video player �

Author

Rating

Links

Popularity

<100

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

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2019-01-30
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Browser
Browser Independent

ivid - Vaadin Add-on Directory

� (cyoa) interactive video player � ivid - Vaadin Add-on Directory

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](https://ividjs.github.io/ivid).
## How to use it ```html ``` *Also see: [IVID-model][1] and [IVID-styles][2] documentation*
## Features - Next video selection (the interactive bit) - Simple single-setup: [ivid-model][1] - Inherited HTML5 video properties - Full video controls on-screen - Customizable controls: [ivid-styles][2] - 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][3] list, any contribution is welcome*
## Development setup Clone ivid ```bash git clone git@github.com:ividjs/ivid.git ``` Install development dependencies ```bash npm i # or yarn ``` Run development server ```bash npm run dev ``` Open browser on `localhost:3000`, the sandbox should be ready to play
## Screenshots **player controls** **choices controls** [1]: https://github.com/ividjs/ivid/blob/master/docs/ivid-model.md [2]: https://github.com/ividjs/ivid/blob/master/docs/ivid-styles.md [3]: https://github.com/ividjs/ivid/blob/master/docs/TODO.md
View on NPM
View on GitHub

ivid version 1.0.0
### Dependencies

ivid version 1.0.1
### Dependencies

ivid version 1.0.2
### Dependencies

ivid version 1.0.3
### Dependencies

ivid version 1.0.4
### Dependencies

ivid version 1.0.5
### Dependencies

ivid version 1.0.6
### Dependencies

ivid version 1.0.7
### Dependencies

Online