Accessible HTML5 Media Players and More

Here’s a list a accessible HTML5 Media Players—I have not tested them all—and some articles on how to build one yourself. Know any others? Please leave info in a comment.

Existing Players

  • Nomensa’s media player
  • JW Player by LongTail
    • Making Video Accessible by LongTail
    • Accessible JW Player Control using Dojo by Ohio State University
  • WebPlayer from Yahoo and the WebPlayer WordPress plugin
  • The Workshop video player
  • Added! Acorn Media Player (via @ghindas, author of Opera article below)
  • Added! MediaElement.js (via @BruceL’s comment below. This is the one I forgot!)

Do It Yourself

  • Accessible HTML5 Audio Player with Yahoo! Media Player Fallback by Terrill Thompson
  • Accessible HTML5 video player by Dev.Opera

More

  • HTML5 Video Player Comparison (unsure if up to date)
  • Media players and accessibility by AccessIQ
  • Captioning YouTube Video and Providing Accessible Controls
  • Tweet
  • Facebook
  • LinkedIn
  • Tumblr
  • Stumble
  • Digg
  • Delicious
Written by Dennis Posted in audio, html5, video

17 comments

  1. Pingback: Accessible HTML5 Media Players and More | Web Axe | Darwin
  2. spacer
    bruce lawson

    mediaelementjs.com/ is very good: Custom Flash and Silverlight players that mimic the HTML5 MediaElement API for older browsers, Accessibility standards including WebVTT, Plugins for WordPress, Drupal, Joomla, jQuery, and BlogEngine.NET, ruby gem, plone, typo3. MIT licensed.

    Also www.leanbackplayer.com/ (good keyboard support, free for non-commercial use)

    Reply
  3. Pingback: Accessible HTML5 Media Players and More | David Tufts
  4. Pingback: Accessible HTML5 Media Players and More | Underwaterpistol
  5. spacer
    Steve Chab

    If you need a way to repeatedly release audio, then I highly recommend SoundCloud or Bandcamp. They both have killer embedable HTML5 players. Check out SoundCloud’s player in action on my website. Thanks!

    Reply
  6. spacer
    M.V.

    Podlove Web Player
    podlove.org/podlove-web-player/

    Based on mediaelement.js, designed for podcasting.

    Reply
  7. spacer
    Chad

    videojs.com/ is the best I’ve used for video. I don’t know if it handles audio.

    Reply
  8. spacer
    George Kaplan

    What about players with strong, secure foundations – some form of referrer security and strong token security?

    I have content I need to lock down but contractually I can’t use Flash or Silverlight.

    Thoughts, suggestions?

    Reply
  9. spacer
    Bill

    Probably worth defining “Accessible” – maybe keyboard navigable, cc capable, transcript display, secondary audio channels for descriptive audio?

    Reply
  10. spacer
    Sveta

    As a deaf person and a UX designer, I would say that it’s more important to have GOOD quality transcripts and captions for videos and podcasts – regardless of what players are used (as long as they have captioning support). I even feel frustrated when asking YouTube video owners to clean up auto captions and hearing them tell me that it’s not their problem without realizing that YouTube captions are not a “final” product and is just a tool to make it easier for them to create captions. Bad captions are not “better” than no captions.

    Reply
  11. spacer
    Sveta

    P.S. Also, it’s important that captions can be seen in a video player on any device – computer, tablet, phone. YouTube and LongTail are one of few players that can show captions on any platform. For more information, I have a website dedicated on this issue on www.audio-accessibility.com.

    Reply
  12. Pingback: Bruce Lawson’s personal site  : Reading List
  13. Pingback: Some links for light reading (13/2/13) | Max Design
  14. spacer
    Ken

    Note that our old player at OSU that you mention is not HTML5 capable. We had a project underway to revise the player but that was scuttled. The one on our site depends on Flash.

    Reply
    • spacer
      Dennis

      Thank you for the clarification.

      Reply
  15. spacer
    Greg Kraus

    I’ve recently done a lot of work with VideoJS to make it much more accessible. The improvements have not made it into their production environment yet, but the changes have all been accepted into their next version.

    Reply
    • spacer
      Dennis

      Great! Thanks for commenting, Greg.

      Reply

Post a comment Cancel reply

You may use the following HTML:
<a class="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>