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.gitInstall development dependencies
npm i # or yarnRun development server
npm run devOpen browser on localhost:3000, the sandbox should be ready to play
Screenshots
player controls
choices controls
