� (cyoa) interactive video player �
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.
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
- Play/Pause:
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
Framework Support
Browser Independent
Install with
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