< interactive video player >
IVID is an interactive video player for modern browsers.
Full VanillaJS webcomponent. Plug-n-play ready, easy setup and use.
<!doctype html>
<html>
<head>
<script src="ivid.min.js" type="module" async></script>
<!-- Optional Styles -->
<link href="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
- 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
Clone ivid dev
branch
git clone -b dev git@github.com:ividjs/ivid.git
npm i # or yarn
npm run dev
Open browser on localhost:3000
, the sandbox should be ready to play
player controls
choices controls