ividjs / Ivid
Licence: apache-2.0
🔴 (cyoa) interactive video player 🔵
Stars: ✭ 122
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Ivid
cacophony
Cacophony HTML5 Interactive Video Player
Stars: ✭ 41 (-66.39%)
Mutual labels: player, interactive
Interact.js
JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
Stars: ✭ 10,561 (+8556.56%)
Mutual labels: vanilla
Poddycast
Podcast app made with Electron, lots of ❤️ and ☕️
Stars: ✭ 111 (-9.02%)
Mutual labels: player
Persistentstreamplayer
Stream audio over http, and persist the data to a local file while buffering
Stars: ✭ 120 (-1.64%)
Mutual labels: player
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+1480.33%)
Mutual labels: player
React Interactive
Better hover, active and focus states than CSS pseudo classes, and a callback when the interactive state changes
Stars: ✭ 115 (-5.74%)
Mutual labels: interactive
Vanilla Hamburger
Animated hamburger menu icons for modern web apps (1.8 KB) 🍔
Stars: ✭ 110 (-9.84%)
Mutual labels: vanilla
Sentaku
Utility to make sentaku (selection, 選択(sentaku)) window with shell command.
Stars: ✭ 117 (-4.1%)
Mutual labels: interactive
Vue Netease Music
🎵 基于 Vue2、Vue-CLI3 的高仿网易云 mac 客户端播放器（PC） Online Music Player
Stars: ✭ 1,783 (+1361.48%)
Mutual labels: player
Flowmarbles
Interactive diagrams of Kotlin Flow https://flowmarbles.com
Stars: ✭ 106 (-13.11%)
Mutual labels: interactive
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (+1436.07%)
Mutual labels: vanilla
Apexcharts.js
📊 Interactive JavaScript Charts built on SVG
Stars: ✭ 10,991 (+8909.02%)
Mutual labels: interactive
Sharer.js
🔛 🔖 Create your own social share buttons. No jquery.
Stars: ✭ 1,624 (+1231.15%)
Mutual labels: vanilla
Sample Currency Converter
A sample currency conversion Progressive Web App
Stars: ✭ 119 (-2.46%)
Mutual labels: vanilla
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/[email protected]/dist/ivid.min.js" type="module" async></script>
<!-- Optional Styles -->
<link href="//unpkg.com/@ividjs/[email protected]/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 [email protected]: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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].