ivid
� (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
Links
Compatibility
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