use-prefers-reduced-motion
plyr-react
use-prefers-reduced-motion | plyr-react | |
---|---|---|
3 | 2 | |
20 | 459 | |
- | - | |
3.9 | 5.8 | |
10 months ago | about 1 month ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
use-prefers-reduced-motion
-
I’ve built a fully themeable and accessible numeric stepper component for React. [Details in the comments]
The user who experiences issues caused by motion can use the component by clicking on the increment/decrement buttons or the thumb. In this way, there is no excessive motion, though I believe the physics-based animation as a response to drag is not excessive at all. I was deep-diving into the motion-related accessibility issues when building https://github.com/anatoliygatt/use-prefers-reduced-motion.
-
I’ve built two React hooks that will help you in making your apps more accessible
A couple of notes for the usePrefersReducedMotion hook.
🗄 Repository: GitHub 💻 Live Demo: CodeSandbox
plyr-react
-
Plyr- A media Player that is must have!
Type Maintainer Link WordPress Brandon Lavigne (@drrobotnik) https://wordpress.org/plugins/plyr/ Angular Simon Bobrov (@smnbbrv) https://github.com/smnbbrv/ngx-plyr React Chintan Prajapati (@chintan9) https://github.com/chintan9/plyr-react Vue Gabe Dunn (@redxtech) https://github.com/redxtech/vue-plyr Neos Jon Uhlmann (@jonnitto) https://packagist.org/packages/jonnitto/plyr Kirby Dominik Pschenitschni (@dpschen) https://github.com/dpschen/kirby-plyrtag REDAXO FriendsOfRedaxo / skerbis (@skerbis) https://github.com/FriendsOfREDAXO/plyr svelte-plyr Ben Woodward / benwoodward (@benwoodward) https://github.com/benwoodward/svelte-plyr
-
Chrome's video loading is slow
I've tried using html5 video tag, and plyr (as it was the fastest integration with my site, but I'm not sure it loads the video differently in any manner), both showed the same results.
What are some alternatives?
use-color - 🛼🛼🛼 The powerful color hook that all designers deserve. ✨ Parse and stringify that just works & 🦾 Strict type checking at compile time
vime - Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
use-prefers-color-scheme - 🪝 React hook for subscribing to user's color scheme preference.
lightGallery - A customizable, modular, responsive, lightbox gallery plugin.
react-as-prop - Type-safe `as` prop utility for flexible and semantic UI components of React
youtube-uploader - Free youtube video uploader with no limits
svelte-plyr
vue-plyr - A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.
react-micro-modal - Accessible, lightweight and configurable modal component with a11y-enabled.
react-tv-player - A React media player component for TV devices, with customisable buttons and arrow-key navigation. It can play a variety of URLs like file paths, HLS/Dash streams and even YouTube links directly. Try out the demo on a desktop browser to see how it can simplify playback in your big-screen web apps: https://lewhunt.github.io/react-tv-player
jQuery - jQuery JavaScript Library
accessible-html5-video-player - Accessible HTML5 Video Player