Accessible HTML5 Video Player

Accessible HTML5 Video Player
Under BSD 3-Clause "New" or "Revised" License
By paypal

javascript video accessibility html5-video-player paypal

Accessible HTML5 Video Player

What is it?

A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For details, read the blog post Introducing an Accessible HTML5 Video Player on the PayPal Engineering blog (updated link). Also see 7 Lessons from Developing an Accessible HTML 5 Video Player.


CSS and Image

Insert the CSS in the Head of your HTML document. You'll also need to upload the sprite image (or use your own) and adjust the path in the CSS file.

<link rel="stylesheet" href="/css/px-video.css" />


Insert the HTML5 video markup in the Body of your HTML document. Replace the video, poster, and caption URLs. Modify the sizes of video and fallback image as needed.



Insert two JavaScript files right before the closing Body element of your HTML document. Add a Script element to initialize the video. Options are passed in JSON format. The options are:

| option | description | dataType | | default |
| videoId | the value of the ID of the widget container | string | required | |
| captionsOnDefault | denotes whether to show or hide caption upon loading | boolean | optional | true |
| seekInterval | the number of seconds to rewind and fast forward | number | optional | 10 |
| videoTitle | short title of video; used for aria-label attribute on Play button to clarify to screen reader user what will be played | string | optional | Play |
| debug | turn console logs on or off | boolean | optional | false |


// Initialize
new InitPxVideo({
"videoId": "myvid",
"captionsOnDefault": true,
"seekInterval": 20,
"videoTitle": "clips of stand-up comedy",
"debug": true


View Demo
React Version

The React version has been designed to be integrated into your react codebase easily. The video React component is named PXvideo and has the below API:

label: 'English captions',
source: 'media/captions_PayPal_Austin_en.vtt',
lang: 'EN',
default: true

A demo could be reached at: View Demo


npm install // install dependencies
npm run react // transpile .jsx into valid .js using Babel

Feedback and Contributions

If you experience any errors or if you have ideas for improvement, please feel free to open an issue or send a pull request.

~~You can also follow and contact the PayPal Accessibility team on Twitter: @PayPalInclusive~~ No longer exists.


Browser Support

Limitations and Known Issues

Related Resources

Projects influenced by the PayPal Accessible HTML5 Video Player

Copyright and License

Copyright 2019, PayPal under the BSD license.