Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OU Media Player at a11yLDN 2012


Published on

My slides on the Open University project to develop an accessible, easily embeddable, maintainable multimedia player for student and public facing OU sites. Presentation to the a11yLDN conference, London, 19 September 2012.

Published in: Education
  • Be the first to like this

OU Media Player at a11yLDN 2012

  1. 1. OU Media Playerconsistent, accessible HTML5 multimedia? N.D.Freear The Open University 19 Sep 2012 Twitter: nfreear • #a11yLDN • #ouplayer
  2. 2. The problem• Lots of OU web assets - OUVLE, OpenLearn, Study at OU, OU-Drupal, Platform, research blogs, Cloudworks...• Each site/ developer finds their own solution• Different user experiences, branding, levels of accessibility...• Plus, a support/ maintenance nightmare...• HTML5 anyone?
  3. 3. The good... Easy YouTube 2008
  4. 4. Who else is doing this?• Easy YouTube, 2008 Flash o Blog:• 2009 Flash,• Universal subtitles,• ...• YouTube HTML5,• ODI player, 2011 Flash*• Nomensa, 2011-12 Flash*• 2012 Flash*• ...(New to me, )
  5. 5. ..the odd... ODI player 2011
  6. 6. Who else? part 2Questions:• * Why Flash-only in 2011/12?• Start from scratch?• Is it flexible? (ODI)• Are they open-source? Can we/ others build upon?• Or, HTML5 media libraries - the same mistakes again?
  7. 7. Our approach• Dont "start from scratch"• Build on existing components, including open source• Hopefully, contribute back to the community - code/ patches/ knowledge...
  8. 8. Other guiding "principles"• Good user-experience for all• Consistent look and feel• Make it easy for authors to embed a player - minimal changes to practice• Simple for developers to integrate and customize• Flexible for a wide variety of sites/contexts• Make it OK to upgrade for large user-base• Foster continuous innovation
  9. 9. The solution• A common, embeddable player• *Easy to embed• OU podcast infrastructure (+YouTube...)• Service/iframe-based embeds• oEmbed• HTML5 + Flash + Javascript + CSS• OU brand• Variants (3): OU Podcast/public, OUVLE, OpenLearn ...
  10. 10. The solution, part deux• Unobtrusive accessibility• Captions (subtitles) / transcripts -• Mobile/ tablet support• Themable• Internationalized• Performance• ...• Maintenance - only 1 player needs upgrading
  11. 11. Collaboration...• Learning & Teaching Solutions• Knowledge Media Institute• Institute of Educational Tech *• Disabled Student Services• Information Technology• Open Media Unit
  12. 12. January-July 2011• "Attempt 1"• Based on Flowplayer - open source Flash libraries• Flash falling back to HTML5• Two "chunky" designs• Senior management "surprised" - too big for the VLE• Bugs in design/ CSS• No fullscreen (there is a "popout" player)
  13. 13. "2011 Dark"
  14. 14. "2011 Light"
  15. 15. January-June 2012• "Version 2" - deployment plan• Based on Mediaelement.js• HTML5 falling back to Flash• But, Flash is not "2nd-class" citizen• Compact, less obtrusive design• With Fullscreen - yay!
  16. 16. ...and the pretty OU player light 2012
  17. 17. Known issues/ limitations• Yes, the buttons are quite small• No WebM encoding, yet• Some bugs to fix for mobilesHowever, it works in narrow columns, and is accepted by VLE colleagues - yay!
  18. 18. Mediaelement.js• Author: John Dyer• HTML5 audio/video library• With Flash-HTML5 shim - "fallforward"• Good mobile support• Some accessibility issues, but..• ..Very extensible/ hackable• jQuery or Ender.js• WebVTT• Open source / GPLv2/MIT
  19. 19. Mediaelement.js 2 • Browser-codec support grid
  20. 20. Open source & HTML5 needs you
  21. 21. oEmbed• Unified approach to embedding• Service, API• XML, JSON, JSON-P• Native to Wordpress 2.9+• Plugins, libraries - Drupal, PHP ... A facilitator for HTML5 innovation?
  22. 22. Roadmap (the plan)
  23. 23. Status• Technical testing bugs - mostly fixed o (Mobile testing -- needs more work)• Accessibility/usability bugs - some fixed• Production hosting - slow, slow..• Pilot deployment - library -- in progress• VLE deployment - pushed back to December :(• Other deployments o Cloudworks deployment -- Sep 2012• Handover - production support - December• Steering group / roadmap -- ?
  24. 24. Questions• Open source - if, when?• Stable versus innovative - how?• LTS support + IET contributions - how?• WebM encoding - when?
  25. 25. Challenges• Many stakeholders• Many contexts• Audio + video• Mobile debugging• First impressions count!• Tech. test, Access. test, test, test...• Finding time to communicate, as well as code
  26. 26. SeGA - securing greater access.• An Open University initiative• Student facing services• Process, management, leadership• Developing "practitioners" across faculties• Forum for discussing difficult questions,• Referral panel for complex issues• A work-in-progress
  27. 27. Postgraduate & free courses• H810 "Accessible online learning: supporting disabled students"• Counts to: cert, diploma & masters "online and distance education" (MAODE) Free:
  28. 28. Links• OU player prototype,• Blogs, ../ou-media-player-project•• Twitter: nfreear