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
Chi-Square Test Non Parametric Test Categorical Variable
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?
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)
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!
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
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
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
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,
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
"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..