Date post: | 21-Jun-2015 |
Category: |
Education |
Upload: | nicholas-freear |
View: | 1,348 times |
Download: | 7 times |
OU Media Playerconsistent, accessible HTML5 multimedia?
N.D.Freear The Open University 19 Sep 2012Twitter: nfreear • #a11yLDN • #ouplayer
Cloudworks.ac.uk/cloud/view/6470
a11yldn.org.uk
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?
The good... Easy YouTube 2008
Who else is doing 'this'?
• 'Easy YouTube', 2008 Flash icant.co.uk/easy-youtubeo 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 )
..the odd... 'ODI' player 2011 http://bit.ly/odi-player1
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?
Our approach
• Don't "start from scratch"
• Build on existing components, including open source
• Hopefully, contribute back to the community - code/ patches/ knowledge...
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
"Best of breed"
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
• ...
The 'solution', part deux
• Unobtrusive accessibility
• Captions (subtitles) / transcripts -
• Mobile/ tablet support
• Themable
• Internationalized
• Performance
• ...
• Maintenance - only '1' player needs upgrading
Collaboration...
• Learning & Teaching Solutions
• Knowledge Media Institute
• Institute of Educational Tech *
• Disabled Student Services
• Information Technology
• Open Media Unit
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)
Used in Cloudworks
"2011 Dark"
"2011 Light"
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!
...and the pretty OU player light 2012
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!
Something we can release / a work in progress
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
• http://mediaelementjs.com
Mediaelement.js 2
• Browser-codec
support grid
Open source & HTML5 needs you
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?
Roadmap (the plan)
Status
• Technical testing bugs - mostly fixedo (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 deploymentso Cloudworks deployment -- Sep 2012
• Handover - production support - December
• Steering group / roadmap -- ?
Questions
• Open source - if, when?
• Stable versus innovative - how?
• LTS support + IET contributions - how?
• WebM encoding - when?
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
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
(Note, pre-dates BS 8878 pub., I think..)
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
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
http://a11yldn.org.uk