OU Media Player at a11yLDN 2012
•Download as PPT, PDF•
0 likes•1,386 views
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. http://a11yldn.org.uk
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to OU Media Player at a11yLDN 2012
Similar to OU Media Player at a11yLDN 2012 (20)
More from Nick Freear
More from Nick Freear (12)
Recently uploaded
Recently uploaded (20)
OU Media Player at a11yLDN 2012
- 1. OU Media Player consistent, accessible HTML5 multimedia? N.D.Freear The Open University 19 Sep 2012 Twitter: nfreear • #a11yLDN • #ouplayer Cloudworks.ac.uk/cloud/view/6470 a11yldn.org.uk
- 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. The good... Easy YouTube 2008
- 4. Who else is doing 'this'? • 'Easy YouTube', 2008 Flash icant.co.uk/easy-youtube o Blog: http://bit.ly/codepo-easy-yt-blog1 • 2009 Flash, Maltwiki.org • Universal subtitles, www.universalsubtitles.org • ... • YouTube HTML5, www.youtube.com/html5 • ODI player, 2011 Flash* odicatalogue.co.uk • Nomensa, 2011-12 Flash* http://bit.ly/nomensa-player1 • 2012 Flash* edu.mwjt.co.uk/access-youtube-new-webs.. • ... (New to me, wac.osu.edu/examples/jwpc )
- 5. ..the odd... 'ODI' player 2011 http://bit.ly/odi-player1
- 6. Who else? part 2 Questions: • * 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. Our approach • Don't "start from scratch" • Build on existing components, including open source • Hopefully, contribute back to the community - code/ patches/ knowledge...
- 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. The 'solution' • A common, embeddable player • *Easy to embed • OU podcast infrastructure (+YouTube...) • Service/iframe-based embeds • oEmbed www.oembed.com • HTML5 + Flash + Javascript + CSS • OU brand • Variants (3): OU Podcast/public, OUVLE, OpenLearn ...
- 10. The 'solution', part deux • Unobtrusive accessibility • Captions (subtitles) / transcripts - • Mobile/ tablet support • Themable • Internationalized • Performance • ... • Maintenance - only '1' player needs upgrading
- 11. Collaboration... • Learning & Teaching Solutions • Knowledge Media Institute • Institute of Educational Tech * • Disabled Student Services • Information Technology • Open Media Unit
- 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. "2011 Dark"
- 14. "2011 Light"
- 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. ...and the pretty OU player light 2012
- 17. Known issues/ limitations • Yes, the buttons are quite small • No WebM encoding, yet • Some bugs to fix for mobiles However, it works in narrow columns, and is accepted by VLE colleagues - yay!
- 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. Mediaelement.js 2 • Browser-codec support grid
- 20. Open source & HTML5 needs you
- 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?
- 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. Questions • Open source - if, when? • Stable versus innovative - how? • LTS support + IET contributions - how? • WebM encoding - when?
- 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. 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 http://bit.ly/ou-iet-sega1
- 27. Postgraduate & free courses • H810 "Accessible online learning: supporting disabled students" • Counts to: cert, diploma & masters "online and distance education" (MAODE) http://bit.ly/ou-course-h810 Free: http://openlearn.open.ac.uk/H807_1
- 28. Links • OU player prototype, http://embed.open.ac.uk • Blogs, freear.org.uk ../ou-media-player-project • http://freear.org.uk/content/ou-embed-proposal • http://cloudworks.ac.uk/tag/view/a11yLDN Twitter: nfreear
Editor's Notes
- http://slideshare.net/nfreear http://docs.google.com/pre.../pub?id=1BoV5OOCt8LyrC53u2lmd4FSBTIbKt4bPZS6OP9clTXU http://cloudworks.ac.uk/tag/view/a11yLDN License: Creative Commons Attribution (CC-by), except 3rd party images - copyright the photographers/site owners. These slides will be up on Slideshare ( ), Google Docs ( ) and
- http://www.open.edu/openlearn/ http://www8.open.ac.uk/platform/ http://cloudworks.ac.uk/ VLE - "virtual learning environment". Also, online learning environment, learning management system..
- The good... Easy YouTube http://icant.co.uk/easy-youtube/?http://youtube.com/watch?v=b_Khs5zGrRo&search=Manu+Katche (c) 2008 by Chris Heilmann, BSD license,
- http://christianheilmann.com/2008/03/12/video-captioning-made-easy-with-the-youtube-javascript-api/ http://www.nomensa.com/about/news-items/nomensas-open-source-accessible-media-player-govuk
- The Office of Disability Issues and their developers have obviously put a lot of effort into this player, so I'm not knocking their intentions. However, in this mobile and potentially post-Flash age, a fixed size (check?) Flash player seems odd.. 'ODI player' (c) Office for Disability Issues, HM Government http://www.odicatalogue.co.uk http://odi.dwp.gov.uk/inclusive-communications/channels/odi-accessible-media-player.php
- I'd be lying if I said these principles were documented from the early on, but hopefully this gives a flavour of our aim..
- The most popular/ iTunes U collections have captions / subtitles - presented via WebVTT in OU Player, Some statistics are on the KMi 'Impact' page, http://projects.kmi.open.ac.uk/itunesu/impact/ Many of the OU Podcast collections have text transcripts - PDF format - presented as HTML in OU Player,
- It may sound cheesy, but it's been a team effort...! LTS - design/ VLE/ OpenLearn/ test, KMi - OU Podcast IT - hosting/ deploy IET - development/ test, DSS - direction/ spec. OMU - "client" People: LTS - Peter Devine, David Winter, Tammy Alexander, Jamie Daniels, Sam Marshall, Ray Guo, Pete Mitton, KMi - Ben Hawkridge, Chris Vine, IT - Stuart Crouch, IET - Will Woods, Nick Freear, DSS - Guy Carberry, Steven Price, OMU - Andrew Law, Photo credits: Perry Building and Jennie Lee building photos, Copyright (c) 2012 Ross MacKenzie -- used with permission, http://rossmac.blogspot.co.uk/2012/05/just-another-tuesday-photographing.html Berrill building photo, Wikipedia/Nightsturm, License: CC-by, http://en.wikipedia.org/wiki/File:Berrill_Building_Entrance_The_Open_University.jpg OU/Vipex access vehicle photo, Copyright (c) Vipex (permission sought), http://www.vipex.co.uk/open-university-vipex-access-vehicle/
- Design by David Winter / LTS Implementation (with bugs) by Nick Formerly called "OUICE Dark"
- Design by Peter Devine / LTS Implementation (with bugs) by Nick Formerly called "OUICE Light"
- Design by Peter Devine / LTS (Implementation by Peter and Nick) 2012 light
- http://blog.mediaelementjs.com/2010/07/mediaelementjs-released/ http://access.ecs.soton.ac.uk/blog/synotemobile/2012/06/01/discussions-around-embedding-media-players/ Image sources/ credits:
- "Your country needs you" Wallace & Grommit poster, http://wetravelworld.com/2009/08/14/legoland-and-museums-of-science-and-natural-history-p21880/
- We're a bit behind the roadmap.. :( * 4 October 2012 - new OU Player on Cloudworks - http://cloudworks.ac.uk/cloud/view/5630 * October - Mediaelement.js patches * November - OU-Drupal pilot(s) * December - Library pilot? * January 2013 - OUVLE ...
- Hmm, Handover to "Learning Teaching Systems" Far too many question marks at the mo. Very wordy!
- http://www8.open.ac.uk/iet/main/core-services/accessibility-and-usability/securing-greater-accessibility-sega http://www.access8878.co.uk/ Confirmed - SeGA was developed before BS 8878 was published. Note, SeGA is student-facing only. Other efforts for staff-facing?
- An unashamed plug in these straitened times... http://www3.open.ac.uk/study/postgraduate/course/h810.htm The Course Chair, Dr Chetz Colwell is (here today/ in this room) And, I've got some leaflets..