https://github.com/ividjs/ivid

interactive video player – "cyoa" like Netflix's Bandersnatch
https://github.com/ividjs/ivid

bandersnatch choose-your-own-adventure cyoa interactive netflix player vanilla video webcomponent

Last synced: 10 days ago
JSON representation

interactive video player – "cyoa" like Netflix's Bandersnatch

• Host: GitHub
• URL: https://github.com/ividjs/ivid
• Owner: ividjs
• License: apache-2.0
• Created: 2019-01-03T02:02:29.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-12-21T02:36:12.000Z (about 3 years ago)
• Last Synced: 2025-01-16T23:05:27.556Z (18 days ago)
• Topics: bandersnatch, choose-your-own-adventure, cyoa, interactive, netflix, player, vanilla, video, webcomponent
• Language: JavaScript
• Homepage: https://ividjs.github.io/ivid/
• Size: 88.9 KB
• Stars: 134
• Watchers: 4
• Forks: 11
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  



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](https://ividjs.github.io/ivid).

## How to use it

```html

  

    

    

    

    

    

      let model = { ... }; // Setup the video-map model

      document.getElementById("sample").setAttribute("model", JSON.stringify(model));

    

  

  

    

  

```

*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 [email protected]: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