▶️ Accessible Video Player
Accessible Video Player creates keyboard and assistive technology friendly videos from Vimeo.
Accessible Video Player uses the Vimeo JS API to manipulate each embedded video. Controls are generated on the fly, a set for each embedded Vimeo player found on a page.
The following video controls are made available:
- Play/pause toggle button
- Timeline slider
- Volume slider
- Mute button
- Full screen button
- View and set closed caption track (if available)
- Video and controls flex to viewport width
- Events are announced out loud as they happen
1) Include the Vimeo JS API and Moment.js dependencies:
<script src="https://player.vimeo.com/api/player.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
2) Include this lib at the bottom of your page:
The included script will automatically find any
<iframe> elements on the page with embedded videos from the domain
player.vimeo.com and attaches the controls on the fly. No other configuration is required!
If you need to manually create a video player you can do so by the following.
1) Add an
id to the embedded video
iframe element and the
data-accessible attribute. The attribute tells the script to not run on this video automatically.
<iframe id="myVideo" data-accessible="true" src="..." ...></iframe>
2) Create a new object and pass the
id of the embedded video to the object:
<script> var myVideo = new accessibleVideoPlayer('myVideo'); </script>
This project and its source code is licensed under the MIT license.